这两天一直在探究CSS Animation中animation-fill-mode属性中的细节，那是有原因的，具体原因是什么就不多说了。虽然在《理解animation-fill-mode属性》一文让我稍加对该属性有一定的了解。但还有一些潜在的细节和因素还是不为人知。所以我决定花一定的时间彻底的来剖析animation-fill-mode。如果你感兴趣，请继续往下阅读。

相关的概念

要深入的了解animation-fill-mode，就很有必要对CSS Animation的一些概念进行了解。对于这些概念，这篇文章并不会深入的介绍，只是简单的说说这些概念，能更好的帮助大家更好的理解后续的内容。

状态

在任何一个动画当中，都会有两个状态：开始状态和结束状态。

上图显示的是一个动画的开始状态，一个蓝色的小圆在左屏幕的左边显示。而下面的另一张图，则表示动画的结束状态，即一个放大的蓝色圆在屏幕的右边显示：

在CSS Animation中，对于这两种状态，在不同情形下是有不同的解释。比如动画的@keyframes有0%（或者关键词from）和100%（或者关键词to）的样式，那么开始状态是对应0%还是100%状态的样式，这得取决于animation-fill-mode的值。如果你阅读过前面的文章，你可能会有所了解。当然，在@keyframes中有时候并不会显式的通过0%或100%定义样式，这个时候的初始状态和结束状态，都是CSS给元素定义的样式。

这个示例中animation-fill-mode:both;，从效果中明显的能看动画的开始状态和结束状态。

插值

前面说了，任何一个动画有两个状态：开始状态和结束状态。而且每个动画都有一个过度函数（timing-function），能让动画执行过程有一个动画函数，比如一个平稳过渡，就是这个过渡创造了所有中间状态。这种创造中间状态被称为插值。这种插值发现在一段时间内，这段时间是通过animation-duration来决定。其效果类似于下图：

持续时间和关键帧

了解CSS Animation的同学都知道，是通过animation-duration的控制一个动画播放持续时间，而动画是通过@keyframes来声明。而这两者结合在一起就产生了动画的另一个状态：动画进行。如下图所示：

延迟和抵消动画

在CSS Animation中通过animation-delay属性来控制一个动画延迟播放。如下图所示：

animation-delay除了可以延迟动画播放之外，还可以抵消动画。当animation-delay取值为负值时，就可以抵消动画。如下图所示：

动画反转（交替动画）

动画播放默认顺序从0%到100%。但可以通过animation-direction属性可以改变动画播放顺序。其有四个属性值：normal、reverse、alternate或者alternate-reverse。normal和reverse很容易让人理解，但更有意思的是alternate和alternate-reverse。

当animation-direction取值为alternate-reverse时，动画第一次播放按normal，第二次开始就是reverse。这样交替播放：

但animation-direction设置为alternate时，它的表现行为又略为不同：