animation-fill-mode

animation-fill-mode 属性定义动画在执行时间之外应用的值。更具体地是指，它定义在动画延迟时间期间以及在动画完成执行之后应用于元素的什么样式。

我们先来看看它的参数吧：none | forwards | backwards | both

• none。动画执行前后不改变任何样式。
• forwards。目标保持动画最后一帧的样式，最后一帧是哪个取决于 animation-direction 和 animation-iteration-count。
• backwards。动画采用相应第一帧的样式，保持 animation-delay。
• both。动画将会执行 forwards 和 backwards 执行的动作。

说实话，我接触这个属性的时候，也是一脸懵逼，这都是什么鬼东西啊！

简单来说，none 表示不设置结束之后的状态，默认情况下回到跟初始状态一样；forwards 表示将动画元素设置为整个动画结束时的状态；backwards 明确设置动画结束之后回到初始状态；both 表示设置为结束或者开始时候的状态，一般回到默认状态，这要取决于 animation-direction 了（如果执行偶数次，动画来回运动，最终回到初始状态为 backwards 状态；当为奇数次时，则为结束状态为 forwards 状态）。

挺考空间想象力的一个属性哈哈，还好我也算是理解了。自己写两个例子就会啦，没关系，多写多想，自然而然的结果。不知道你理解了没？

下一节：animation-play-state