animation-fill-mode属性的理解

    CSS3的动画属性真是非常实用。相信很多人用到的频率都是非常的高。
我在使用的时候，发现这个属性有四个不同的属性值，但是不太清楚他们的区别，
查找了很久终于弄清楚了。本文仅为个人学习记录，如有错误还望前辈指正。

    本文所写内容为查看官方文档后的个人理解。
    首先介绍4个属性值：
                    none
                    forwords
                    backwords
                    both
    none：
        none为默认值。很多人以为默认值是backwords，但其实默认值是none
        none的执行效果是，从0%之前开始，结束还返回到0%之前的状态。
        解释：如果所需执行animation的元素在执行之前有他自己的效果，那么就从他本身的效果开始显示，
        最后还返回这个效果显示。animation如果比作makelove的话，那么none的效果就好像从前戏的亲吻开始，
        最后完事了又以一个亲吻结束。
        
    forwords：
        forwords意味着停留在动画结束的位置。所以forwords的运动轨迹其实是从动画开始之前——动画进行中——100%
        也就是说，一直到forwords结束，animation都没有结束。最后动画停止时，
        执行animation的元素的样式还是在动画中设置的样式。
        
    backwords：
        backwords的结束效果和none一模一样，以至于有人会把backwords当场默认值。
        backwords的轨迹为0%——动画进行中——0%之前
        也就是说，backwords根本就没有前戏，见面了就*（手动打码）。
        所以不论执行animation的元素在执行之前有没有样式都不会起作用，
        但是结束了animation之后还是会显示在执行animation之前所设置的样式。
        也就是说，完事了这哥们来了个温柔的吻。
        
    both：
        通俗的讲，both是取了forwords的结尾和backwords的开头。
        也就是说，both这个哥们不仅没有前戏，完事了提上裤子就走，简直就是个畜生。
        both的运行轨迹:0%——动画运行中——100%
        所以both是一上来就进入到了动画中，并且最后停留在动画结束的位置始终没有结束动画。

    最后：animation-fill-mode的状态和animation-direction的值有关。 
    1、当animation-direction为normal 或 alternate时，和上面的状态相同。 
    2、当animation-direction为alternate-reverse 或reverse 时，状态刚好和上面相反。从100%到0%执行。
    
    以上就是我在看了文档之后的理解，没有代码和图片演示非常抱歉，希望能给你一些启发。复制代码

转载于:https://juejin.im/post/5bd933d65188257f604c78f6