animation-fill-mode属性

学习animation的时候，就已经看到这个属性了，但是没有详细钻研，今天突然碰到，详细了解一下，仅仅自己学习的过程，如有错误，请各位指正。谢谢。

animation-fill-mode属性规定动画在播放之前或之后，其动画效果是否可见。
animation-fill-mode共有四个属性值，分别为：none、forwards、backwards、both。
注：IE9-不支持此属性。

仅仅看上面，很难理解。下面详细解释。
首先我们要了解动画按照执行时间可以分为三个状态：动画执行前（动画延迟）、动画执行中、动画执行后。了解了状态，我们逐个值看。
示例代码：

<div class="test">
    <span class="mode1">none</span>
    <span class="mode2">forwards</span>
    <span class="mode3">backwards</span>
    <span class="mode4">both</span>
</div>

.test span{
    display: block;
    width: 100px;
    height: 100px;
    font-size: 14px;
    color: #000;
    line-height: 100px;
    text-align: center;
    border-radius: 100%;
    background: #ac2aef;
    animation-name: move;
    animation-duration: 3s;
    animation-delay: 1s;
    animation-timing-function: ease-in;
}
.mode1{animation-fill-mode: none;}
.mode2{animation-fill-mode: forwards;}
.mode3{animation-fill-mode: backwards;}
.mode4{animation-fill-mode: both;}
@keyframes move{
    0%{
        background: #FFFA90;
        transform: translateX(0) scale(1);
    }
    100%{
        background: #4cd826;
        transform: translateX(200px) scale(0.5);
    }
}

上述动画我们有延迟1s，可以观察动画执行前的状态。
注意：动画执行方向是0%到100%执行。

从上面的图我们可以看出，动画执行中四个值的状态是一致的，区别在动画执行前和执行后。

当值为none时

none为默认值，在动画执行前和动画执行后，对元素的样式不会产生影响。
从上图可以看到，值为none时，动画执行前和执行后的状态和无动画的状态是一致的，动画执行前和执行后对元素没有产生任何样式影响。动画执行后跳到无动画状态。

当值为forwards时

forwards当使用这个值时，告诉浏览器：动画结束后，元素的样式将设置为动画的最后一帧的样式。
从上图可以看出，值为forwards时，动画执行前的状态和无动画状态一致，但是动画执行后状态却不一样，查看动画效果，你会发现他的状态和动画最后一帧的状态相同。

当值为backwards时

从CSS样式可以看到，动画我们有设置延迟1s,为了便于观察动画执行前的状态。
backwards当使用这个值时，告诉浏览器：动画开始前，元素的样式将设置为动画的第一帧的样式。
从上图可以看出，值为backwards时，动画执行前的状态和无动画状态 不一致，可以看出，它的状态和动画第一帧相同，但是动画执行后状态却和无动画时的状态相同。

当值为both时

both当使用这个值时，告诉浏览器：同时使用forwards和backwards两个属性值的效果。
从上图可以看出，动画执行前是动画第一帧的效果，动画执行后是动画最后一帧的效果。

最后animation-fill-mode的状态和animation-direction的值有关。
1、当animation-direction为normal 或 alternate时，和上面的状态相同。
2、当animation-direction为alternate-reverse 或reverse 时，状态刚好和上面相反。从100%到0%执行。

本文参考网址：
https://www.w3cplus.com/css3/understanding-css-animation-fill-mode-property.html
https://www.sitepoint.com/understanding-css-animation-fill-mode-property/