css。过渡动画

1.transition-property(过渡动画)

　　

div{
　　-webkit-transition-property:width,height,color;
　　transition-property:width,height,color
　}

2.transition-duration(过渡动画所需时间)

　　　　div{

　　　　　　-webkit-trnasition-duration:5s;

　　　　　　　　　　transition-duration:5s;

　　　　}

3.transition-timing-function(动画--过渡函数)

　　ease:默认值，逐渐变慢（cubic-bezier(0.25,0.1,0.25,1)）

　　linear:匀速过渡效果（等于 cubic-bezier（0,0,1,1））

　　ease-in：加速的过渡效果（等于cubic-bezier（0,0,0.58,1））

　　ease-out：减速的过渡效果（等于cubic-bezier(0,0,0.58,1))

　　ease-in-out:加速然后减速（等于cubic-bezier（0.42,0,0.58,1.0））

　　cubic-bezier(n,n,n,n)0-1之间的数值

div{
         -webkit-transition-timing-function:ease-in;
                 transition-timing-function:ease-in;
}

4.transition-delay(动画-过渡延迟时间)

div  {
       -webkit-transition-delay:.1s;
                    transition-delay:.1s;
}

5.transition(过渡)

　　transition:[none|<transition-property>]||<transition-duration>||

　　<transition-timing-function>||<transition-delay>[,*]

自定义动画

　1.animation-name（动画名称）

　　　　div{

　　　　　　　　webkit-animation-name:FromLeftToRight;

}

2.keyframes(关键帧)

　　@keyframes<identifier>{

　　　　from{

　　}

　　　　to{

　　}

　　}

3.animation-duration(动画时间)：

　　　　/*动画的持续时间*/

　　animation-duration:<time>

4.animation-timing-function(动画的过渡速度)：

　　animation-timing-function:ease|linear|ease-in|ease-out|ease-in-out

5.animation-delay(动画延迟时间)

　　div{

　　　　　　-webkit-animation-delay:1s;

　　}

6.animation-iteration-count(动画执行次数)

　　animation-iteration-count:infinite|<number>

div{

　　-webkit-animation-iteration-count:2;

}

7.animation-direction(动画的顺序)

animation-direction:normal|reverse|alternate|alternate-reverse

normal:正常方向　　reverse：反方向运行　　

alternate：动画先正常运行再反方向运行，并持续交替运行

alternate-reverse：动画先反运行再正方向运行，并持续交替运行

8.animation-play-state(动画的状态)

　　animation-play-state：running|paused

　　running：运动　　paused：暂停

9.animation-fill-mode

　　animation-fill-mode：none|forwards|backwards|both

　　none:默认值，不设置对象动画之外的状态

　　forwards：设置对象状态为动画结束时的状态

　　backwards：设置对象状态为动画开始时的状态

　　both：设置对象为动画结束或开始的状态

10.animation-fill-mode（动画复合属性）