CSS3中添加的新属性animation是用来为元素实现动画效果的。但是animation无法单独担当起实现动画的效果。这个我们会在后面讲到。我们先来讲讲animation的相关用法。这里我的代码均是采用标准的css3规范书写，大家使用的时候为了兼容可加上-webkit-、-o-、-ms-、-moz-、-khtml-等前缀以适应不同的浏览器。
方法/步骤
-
1
animation有且可以设置许多个值，这意味着他也有许多个下分的小属性。
正如之前讲到的scale（）可以生出scaleX（）、scaleY（）等。
下面我就来细细的讲述各个小分属性
CSS3新增样式大解析：[8]animation之元素动画 -
animation-name
第一个属性动画名称，这个动画名称是在@key-frames当中规定的，这也是我在开始的时候就说了animation无法单独当起动画实现的原因。因为实质性的动画效果都是在@key-frames当中设定好的。
实例：
animation-name：myAnimation；
CSS3新增样式大解析：[8]animation之元素动画 -
animation-duration
第二个属性规定了动画时间。
也就是执行动画所运行的时间，他的单位是s或者hg毫秒，默认情况下为0。
animation-duration：5s
-
animation-timing-function
第三个属性定义了实现动画的方式（速度曲线），有这么几个值可以选择：
ease（默认的：慢-快-慢）、ease-in（缓入）、ease-out（缓出）、ease-in-out、linear（匀速）、cubic-bezier（n,n,n,n）【每个n的取值均在0-1之间】
step-start：马上转跳到动画结束状态。
step-end：保持动画开始状态，直到动画执行时间结束，马上转跳到动画结束状态。
steps(<number>[, [ start | end ] ]?)：第一个参数number为指定的间隔数，即把动画分为n步阶段性展示，第二个参数默认为end，设置最后一步的状态，start为结束时的状态，end为开始时的状态，若设置与animation-fill-mode的效果冲突，而以animation-fill-mode的设置为动画结束的状态。这个太复杂了！
CSS3新增样式大解析：[8]animation之元素动画 -
animation-delay
第四个属性规定了动画的延迟执行时间，及延迟多久才执行，默认情况下为0；
若为证书，则按设置的时间执行；
若为负数，则截去相应的动画时间，从动画中间执行。比如我的动画时间为20S，现在设置该值为-5s，那么动画最后执行的时间是后面的15秒。
-
animation-iteration-count
规定动画执行的次数，默认的情况下执行1次，你也可以设置为5，或者10；如果你想让动画一直执行下去的话：将值设置为infinite即可，它表示无限的意思。
向下面的图片 小圈的旋转就是无限的 循环rotate实现的，这可以省去制作一张gif动画图所花费的大量时间。
CSS3新增样式大解析：[8]animation之元素动画 -
animation-direction
它规定了动画执行的方向，他在动画执行的下一周期生效（也就是在首次播放不受影响）且规定了动画执行的次数必须是2次及以上。否则该属性无效果。他的值有normal和alternate、reverse和alternate-reverse两个，
normal的方式A-B-c—A-B-c...
alternate的方式A-B--C-B-A-B-C...
reverse的方向和normal的方向相反，alternate-reverse的方向和alternate的方向相反。
CSS3新增样式大解析：[8]animation之元素动画 -
animation-play-state
设置动画的播放状态，可取的值有paused和running两个，前者是暂停，后者是运行。
-
最后一个相关的属性是animation-fill-mode
它的值有forwards和backwards，both以及none。用来规定动画执行完后的显示状态，forwards表示动画播放结束的最后是什么状态，那播放完就是什么状态；backwards表示动画播放完后又回到动画初始执行时的状态显示（也就是没有执行动画前的状态）。
-
需要说明的是：
animation-play-state的属性不能像起他的属性一样合写如animation当中，而需要单独设置。
由于涉及到动画，截图无法展示，顾不放图了。
- animation的兼容性在谷歌火狐opera以及Safari的浏览器上实现的比较好，而在IE上至少是IE10才能实现动画效果，比较坑。