CSS动画animation

CSS Animations 是CSS的一个模块，它定义了如何用关键帧来随时间推移对CSS属性的值进行动画处理。关键帧动画的行为可以通过指定它们的持续时间，它们的重复次数以及它们如何重复来控制。CSS动画功能是非常强大的，并且效率也比较高，如果能用CSS解决的动画那么我们最好不用JS动画来完成。

CSS animations 使得可以将从一个CSS样式配置转换到另一个CSS样式配置。动画包括两个部分:描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧。

1.创建动画序列

           animation属性或其子属性配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由 @keyframes规则实现；

  animation的子属性有：

• animation-delay： 延时，取值ms/s;
• animation-direction  

1.     -normal ：默认值，循环结束重置到起点再次开始
2.     -alternate：交替反向运行
3.     -reverse：结束后反向运行
4.     -alternate-reverse：反向交替

• animation-duration：完成一次完整的动画所用的时间，默认0s,取值ms/s
• animation-iteration-count：迭代次数，取值：

1.     -infinite无限
2.     -数字

• animation-name:指定keyframes定义的动画帧，可以为多个值，不同值使用逗号分隔
• animation-play-state:动画运行或暂停

1. running
2. paused

• animation-timing-function：动画运动函数

1. ease
2. liner
3. ease-in
4. ease-out
5. ease-in-out

• animation-fill-mode：控制元素在动画执行前与动画完成后的样式

1. none
2. forward
3. backwards
4. both

• animation：速写