css动画详解 (transition & animation)

属性

transition（4个属性）:

transition: width 5s ease 3s;  /*简写*/
    transition-property: width; /*过渡属性名*/
    transition-duration: 5s; /*持续时间，默认为0*/
    transition-timing-function: ease; /*速度*/
    transition-delay: 3s; /*延迟*/

animation（7+个属性）

animation: myfirst 5s linear 2s infinite alternate backwards;/*简写*/
/*参数依次是：
name/duration/timing-function/delay/iteration-count/
direction （方向，重复多次时起作用，表示是否逆向播放，alternate逆向/
play-state（动画状态，running开启）/
fill-mode (动画结束时候的停留位置，backwards开始帧停留，forward结束帧停留)*/
/*  infinite:无限次的  */

transform 又是什么

元素的一个移动属性，修改具体的参数，元素会做静态移动，也可以作为动画的变化属性；包含5个值：

1. translate3d(x,y,z) 控制元素在页面上的三轴的位置；
2. rotate(deg) 旋转角度；
3. skew[x,y](deg) 倾斜度的；
4. scale3d(x,y,z) 放大缩小，属性是比值；
5. matrix3d，css矩阵。通过这个矩阵属性，涵盖了上面所有的属性值，数学性较强。

区别

1. transition只能设置开始与结束2个关键帧的状态,多个关键帧可以使用 @keyframes 规则撰写动画

 transition: width 2s ease, height 2s ease;
 @keyframes addWidth{
        from{
        100px; /*一般的元素属性变化*/
        transform: translate3d(-500%,0,0); /*transform控制的变化*/
        }
        to{
        200px;
        transform: none;
        }
    }
/*或者用0%到100%*/
@keyframes addWidth{
        0%{
            100px;
        }
        50%{
            200px;
        }
        100%{
            100px;
     }}

2. 触发条件：transition通常和hover等事件配合使用，由事件触发。animation则和gif动态图差不多，立即播放。
3. 循环：animation可以设定循环次数
4. 与JavaScript的交互：animation与js的交互不是很紧密。tranistion和js的结合更强大。js设定要变化的样式，transition负责动画效果。

详细分析见这篇文章：

兼容处理

/*CSS样式，animation一样*/
-webkit-transition: all .5s ease; /*--chrome,safari--*/
-moz-transition: all .5s ease; /*--firefox--*/
-ms-transition: all .5s ease; /*--IE--*/
-o-transition: all .5s ease; /*--opera--*/
transition: all .5s ease; /*--W3C--*/

/*写动画*/
@-webkit-keyframes demo{/*--chrome,safari--*/}
@-moz-keyframes demo{/*--firefox--*/}
@-ms-keyframes demo{/*--IE--*/}
@-o-keyframes demo{/*--opera--*/}
@keyframes demo{ /*--W3C--*/}

详细参考：
https://www.w3.org/TR/css3-animations/