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