CSS 动画
CSS 动画 API 详解
动画属性
animation 由以下属性构成：
- animation-name 名称
- animation-delay 延迟
- animation-duration 持续时间
- animation-timing-function 缓动函数
- animation-iteration-count 执行次数
- animation-direction 动画是否反向播放
- animation-fill-mode 设置CSS动画在执行之前和之后如何将样式应用于其目标
- animation-play-state 控制动画的运行或暂停
动画阶段
动画的阶段分为：初始状态、等待期、动画执行期、完成期
初始状态：就是没有触发动画效果时，元素原有的状态（即不含 animation 的属性）
等待期：从触发动画开始到 animation-delay 计时结束的这段时间
动画执行期：在 delay 时间结束的瞬间开始执行动画，一直持续要最后一帧
完成期：执行完最后一帧时，元素处于的状态
动画缓动函数
常见函数：ease、ease-in、ease-out、ease-in-out、linear、step-start、step-end
step-start 、step-end
step-start：动画立即跳转至最终状态
step-end：动画在结束时跳转至最终状态
现在假设一个方块的动画如下：
@keyframes move {
0% { left: 0; }
100% { left: 100px; }
}
动画持续时长为 10s，当设置缓动函数为 step-start 时，方块会立即移动到 100px 处，当设置缓动函数为 step-end 时，方块会在动画结束时移动到 100px 处，在开始到结束的过程中，都不会产生位移。
steps
step 逐步运动，像是将丝滑的动画进行逐帧播放，其语法为：steps(number , position)
通过 number 参数讲一个运动过程平均拆分为多段，
position 通过 start 或 end 值，来控制在每一段的开始还是时触发动画
当 position 的值为 start 时，是在每一段的结尾部分触发动画
当 position 的值为 end 时，是在每一段的开始部分触发动画
steps 实现 GIF 逐帧动画，假如我们有如下一张12帧的 GIF 静态图
在不使用 steps 的时候，查看效果
如果适用 steps 来进行逐帧播放，那么效果就是符合预期的，查看效果
cubic-bezier 贝塞尔函数
cubic-bezier 函数定义了一个贝塞尔曲线
贝塞尔曲线曲线由四个点 P0，P1，P2 和 P3 定义。P0 和 P3 是曲线的起点和终点。P0是（0,0）并且表示初始时间和初始状态，P3是（1,1）并且表示最终时间和最终状态。
我们需要关注的是 P1 和 P2 两点的取值，而其中 X 轴的取值范围是 0 到 1，当取值超出范围时 cubic-bezier 将失效；Y 轴的取值没有规定，当然也毋须过大。
最直接的理解是，将以一条直线放在范围只有 1 的坐标轴中，并从中间拿出两个点来拉扯（X 轴的取值区间是 [0, 1]，Y 轴任意），最后形成的曲线就是动画的速度曲线。
可以通过可视化工具生成贝塞尔函数
direction 反向播放
animation-direction 有以下属性：
- normal：动画从头开始播放
- reverse：动画从最后一个关键帧开始，在第一个关键帧结束，normal 和 reverse 都相当于单向播放
- alternate：动画从第一个关键帧开始，在最后一个关键帧结束，然后在最后一个关键帧开始，在第一个关键帧结束
- alternate-reverse：与 alternate 相反，两者都相当于来回播放
将上面的 GIF 动图的 animation-direction 设置为 alternate，此时动图就不是从头开始重播了，查看效果
fill-mode
fill-mode 设置CSS动画在执行之前和之后如何将样式应用于其目标，影响的是动画的等待期和完成期的状态
fill-mode 有四个值：
none：等待期和完成期的元素样式都是初始状态样式；
下面假设有一个盒子，css 样式如下：
.box{ transform: translateY(0); } .box.on{ animation: move 1s; } @keyframes move{ from{transform: translateY(-50px)} to {transform: translateY(50px)} }fill-mode 为 none 时转换成的坐标轴图形：
both：等待期样式为第一帧的样式，完成期保持最后一帧的样式；
backwards：等待期样式为第一帧样式，完成期跳转为最初始的样式；
forwards：等待期保持最初始的样式，完成期保持最后一帧的样式；
iteration-count
iteration-count 用于定义动画在结束前运行的次数，次数的值可以是整数，也可以是小数（例如设置值为 1.5 时，动画会执行一遍，然后再次开始，执行到一半时，动画结束），也可以是无限循环的 infinite
play-state
play-state 用于控制动画的运行和暂停，当恢复一个暂停的动画时，是从暂停的位置开始，而不是从动画序列的起点开始
play-state 有三个值：
- unset：不设置
- running：正在运行
- paused：动画暂停