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（动画复合属性）
