animation-fill-mode属性的理解

899 阅读2分钟
    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%执行。
    
    以上就是我在看了文档之后的理解,没有代码和图片演示非常抱歉,希望能给你一些启发。