一、动画animation
概念：实现多个状态间的变化过程，动画过程可控（重复播放、最终动画、是否暂停）
1. 动画的本质是快速切换大量图片时在人脑中形成具有连续性的画面。
2. 构成动画的最小单位：帧或动画帧
动画分为两种模式:
- 补间动画: 动画执行过程中, 没有间隔, 非常平滑, 默认使用速度曲线ease
- 逐帧动画: 一步一步去执行的动画, 中间会有间隔停顿, 使用的速度曲线: steps(正整数); 逐帧动画又叫精灵动画, 常常配合精灵图去使用
语法：
animation：name duration timing-function delay iteration-count direction fill-mode;
animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态
实现步骤:
- 定义动画
方法一:
@keyframes 动画名称 {
from {}
to {}
}
方法二:
@keyframes 动画名称 {
0% {}
25% {}
50% {}
100% {}
}
- 调用动画 animation: 动画名称 动画时长
注意:
- 动画名称和动画时长必须赋值
- 取值不分先后顺序
- 如有两个时间值,则第一个表示动画时长,第二个表示延迟时间
- forwards不能和infinite结合使用，否则不生效
- 调用多个动画时, 动画与动画之间用逗号隔开
steps动画帧:
取值:
- number: 帧数(正整数)
- end: 保留当前帧状态，直到这段动画时间结束
- start: 保留下一帧状状态，直到这段动画事假结束
- 应用: 打字效果、钟表效果（transform: rotate(); transform-origin: 0 centeer;）、跑马效果
二、动画相关属性表格
| 属性 | 取值 | 作用 |
|---|---|---|
| animation-name | 自定义名称(关键词不行) | 动画对象名称 |
| animation-duration | s/ms | 设置对象动画的持续时间 |
| animation-timing-function | ease | 平滑过渡 |
| linear | 线性过渡 | |
| ease-in | 由慢到快 | |
| ease-out | 由快到慢 | |
| ease-in-out | 由慢到快再到慢 | |
| step-start | 等同于 steps(1, start) | |
| step-end | 等同于 steps(1, end) | |
| steps(?, ?) | 接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。 | |
| animation-delay | s/ms | 设置动画的延迟时间 |
| animation-iteration-count | infinite | 无限循环 |
| number | 指定对象动画的具体循环次数 | |
| animation-direction | normal | 正常方法（默认） |
| reverse | 反方向运动 | |
| alternate | 动画先正常运行再反向运行，并持续交替运行 | |
| alternate-reverse | 动画先反向运行再正方向运行，并持续交替运行 | |
| animation-fill-mode | backwards(默认值) | 设置对象状态为动画开始时的状态 |
| forwards | 设置对象状态为动画结束时的状态 | |
| animation-play-state | pasued | 暂停,通常配合:hover使用 |
