CSS3 animations
一个完整的CSS animations由两部分构成
- 一组定义的动画关键帧：@keyframes规则
- 描述该动画的CSS声明：animation属性
1.@keyframes规则
在CSS3中使用@keyframes规则来创建动画，keyframes可以设置多个关键帧，每个关键帧表示动画过程中的一个状态，多个关键帧就可以使动画十分绚丽。
（1）基本语法格式：
@keyframes animationname{
keyframes-selector{css-style;}
}
（2）子属性解释：
- animationname:表示当前动画的名称，它将作为引用时的唯一标识，不能为空
- keyframes-selector：是关键帧选择器，即指定当前关键帧要应用到整个动画过程中的位置值可以是一个百分比、from或者to。其中 ，from和0%效果相同表示动画的开始，to和100%效果相同表示动画的结束。
- css-styles:定义执行到当前关键帧时对应的动画状态
以上三个属性都是必需品，缺一不可
2.animation属性
animation属性用于描述动画的CSS声明，包括指定具体动画以及动画时长等行为。
（1）基本语法：
animation： name duration timing-function delay iteration-count direction fill-mode play-state；
（2）子属性解释：
| 属性 | 描述 |
|---|---|
| animation-name | 规定@keyframes动画的名称。 |
| animation-duration | 规定动画完成一个周期所花费时间。取值为time值 |
| animation-timing-function | 规定动画的速度曲线，取值同过渡相似 |
| animation-delay | 规定动画开始前的延迟，取值为time值 |
| animation-iteration-count | 规定动画被播放的次数。n:定义动画播放次数取值；infinite:规定动画应该无限次播放 |
| animation-direction | 规定动画是否在下一周期逆向播放。normal：默认值，正常播放；alternate：动画轮流反向播放 |
| animation- fill-mode | 规定动画在播放之前或之后，其动画效果是否可见。none：不改变默认行为；forwards：当动画完成后，保持最后一个属性值；backwards：在animation-delay所指定的一段时间内，在动画显示之前，应用开始属性值；both：向前和向后填充模式都被应用 |
| animation-play-state | 规定动画是否正在运行或暂停。paused：规定动画已暂停；running：默认值，规定动画正在播放 |
