码迷,mamicode.com
首页 > Web开发 > 详细

css——动画(transform, transition, animation)

时间:2018-09-04 22:32:12      阅读:180      评论:0      收藏:0      [点我收藏+]

标签:ini   详解   视图   常用   位置   100%   url   需要   gif   

transform

  • 静态属性,一旦写进style里面,会立即显示作用,无任何变化过程。(类似于left, right, top, bottom这类属性)
  • 主要用来做元素的变形
  • 改变元素样式的属性主要有以下五个
    • translate3d(x,y,z) 用来控制元素在页面的三轴上的位置
    • rotate(10deg) 是用来控制元素旋转角度(度deg)
    • skewx,y 制作斜度,2d里面创建3d透视图的必备属性
    • scale3d(2, 1.5, -6) 用来放大缩小效果,属性是比值
    • matrix3d css矩阵,不常用
  • 实例
.demo{
    -webkit-transform: rotate(360deg) skew(-20deg) scale(3) translate(100px, 0);
}

transition : transition-property transition-duration transition-timing-function transition-delay;

  • 动画属性,允许css的属性值在一定的时间区间内平滑的过渡
  • 主要有以下四个属性:
    • transition-property: none(没有属性改变) | all(所有属性改变) | indent(元素属性名)
    • transition-duration: 500ms; 指定元素转换过程的持续时间
    • transition-timing-function: linear(匀速) | ease(逐渐慢下来) | ease-in (加速) | ease-out( 减速) | ease-in-out(先加速后减速);
    • transition-delay: 0.3s; 当该百年元素属性值后多久时间开始执行transition效果
  • 实例
a{
    transition : background .5s  ease-in, color .3s ease-out;
    transition : transform .4s ease-in-out;
}

animation

+为元素实现动画效果,需要和@keyframes一起配合使用,将一套css样式转化成另一套样式

  • 若是考虑兼容,需要加上-webkit-, -o-, -ms-, -moz- 等
  • @keyframes 类似flash中的时间轴和关键帧
    @keyframes animationname{
    keyframes-selector { //建议用0~100%,from(0), to(100%)
    css-styles;
    }
    }
  • 实例
.load-border{
    width: 100px;
    height:100px;
    background: url(‘a.png‘) no-repeat center center;
    -webkit-animation : gif 1.4s infinite linear;
    animation: gif 1.4s infinite linear;
}
@keyframes gif{
     0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100%{
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        width:200px;
    }
}

参考链接:
MDN | transition过度
sf | css3动画属性详解之transform、transition、animation

css——动画(transform, transition, animation)

标签:ini   详解   视图   常用   位置   100%   url   需要   gif   

原文地址:https://www.cnblogs.com/hiluna/p/9588843.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!