来自腾讯的面试题：怎么让animation动画停留在最后一帧？
是不是隐约记得有一个属性可以办得到。给自己三秒钟时间思考一下，三、二、一。
想不到吧，好了，以下揭晓答案。
animation-fill-mode : none | forwards | backwards | both;
| 值 | 描述 |
|---|---|
| none | 不改变默认行为。 |
| forwards | 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。 |
| backwards | 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。 |
| both | 向前和向后填充模式都被应用。 |
animation-fill-mode它能够控制元素在动画执行前与动画完成后的样式。一个带有延迟(animation-delay)，并且按正常方向（animation-direction）执行的动画（正常方向是指normal也就是指动画从0%运行到100%的动画）。动画按执行时间来划分，它分为三个过程，或者说一次动画过程可以将元素划分为三个状态：动画等待、动画进行和动画结束。默认情况之下，只有在动画进行状态，才会应用@keyframes所声明的动画；而在动画等待和动画结束状态，对元素样式并不会产生任何的影响。
重点记住： 动画过程可以将元素划分为三个状态：
- 动画等待
- 动画进行
- 动画结束
none是animation-fill-mode的初始值，也是其默认值。取值为none时，使用得动画不会对动画等待和动画完成的元素样式产生改变。因此在等待（animation-delay）的过程中，样式不改变，结束的时候，元素会闪退到初始状态（即停留在第一帧时候）。
为了平滑过渡，似乎让动画保持在最后一帧，看起来才更符合我们的实际需求。于是forwards的舞台来了。
使用animation-fill-mode:forwards;的效果。当使用这个值时，告诉浏览器动画结束后，元素的样式将设置为动画的最后一帧的样式。
与之相反，backwards是最后停留在第一帧。乍听起来，与none的效果差不多。
这是animation-fill-mode:backwards;的效果。
MDN中，有这样的介绍:
动画将在应用于目标时立即应用第一个关键帧中定义的值，并在animation-delay期间保留此值。 第一个关键帧取决于animation-direction的值：
| animation-direction | first relevant keyframe |
|---|---|
| normal or alternate | 0% or from |
| reverse or alternate-reverse | 100% or to |
所以关键还在于第一帧以及延时。
- 在关键帧中的from中给球添加了一个不同的颜色
- 在动画中使用animation-delay属性添加了一个延迟播放时间
球体先会变成一个蓝色。这是因为有一个延迟时间。从技术上讲，每一个动画都有一个默认的延迟时间，只不过这个时间是0而以，所以你并没有看到其中的变化。根据前面对backwards的描述：动画等待的那段时间内，元素的样式将设置为动画第一帧的样式。这样解释你就应该较为明白，因为我们的示例有一个1s时间的延迟，这样一来，元素在等待的这1s时间内，元素的样式就是关键帧(也就是@keyframes中的frome或0%的样式)第一帧中的样式，在这个示例中，球体变成蓝色。然后在1s时间之后，元素动画效果和之前一样。
最后来看一下animation-fill-mode取值为both的效果。这个值将会告诉浏览器同时应用forwards和backwards两个属性值的效果。言外之意，animation-fill-mode取值为both值时，animation-fill-mode相当于同时配置了backwards和forwards，意味着在动画等待和动画结束状态，元素将分别应用动画第一帧和最后一帧的样式。
