CSS3新增样式大解析：[8]animation之元素动画

CSS3中添加的新属性animation是用来为元素实现动画效果的。但是animation无法单独担当起实现动画的效果。这个我们会在后面讲到。我们先来讲讲animation的相关用法。这里我的代码均是采用标准的css3规范书写，大家使用的时候为了兼容可加上-webkit-、-o-、-ms-、-moz-、-khtml-等前缀以适应不同的浏览器。

方法/步骤

1
animation有且可以设置许多个值，这意味着他也有许多个下分的小属性。正如之前讲到的scale（）可以生出scaleX（）、scaleY（）等。下面我就来细细的讲述各个小分属性



animation-name第一个属性动画名称，这个动画名称是在@key-frames当中规定的，这也是我在开始的时候就说了animation无法单独当起动画实现的原因。因为实质性的动画效果都是在@key-frames当中设定好的。实例：animation-name：myAnimation；



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的设置为动画结束的状态。这个太复杂了！



animation-delay第四个属性规定了动画的延迟执行时间，及延迟多久才执行，默认情况下为0；若为证书，则按设置的时间执行；若为负数，则截去相应的动画时间，从动画中间执行。比如我的动画时间为20S，现在设置该值为-5s，那么动画最后执行的时间是后面的15秒。
animation-iteration-count规定动画执行的次数，默认的情况下执行1次，你也可以设置为5，或者10；如果你想让动画一直执行下去的话：将值设置为infinite即可，它表示无限的意思。向下面的图片 小圈的旋转就是无限的 循环rotate实现的，这可以省去制作一张gif动画图所花费的大量时间。



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的方向相反。



animation-play-state设置动画的播放状态，可取的值有paused和running两个，前者是暂停，后者是运行。
最后一个相关的属性是animation-fill-mode它的值有forwards和backwards，both以及none。用来规定动画执行完后的显示状态，forwards表示动画播放结束的最后是什么状态，那播放完就是什么状态；backwards表示动画播放完后又回到动画初始执行时的状态显示（也就是没有执行动画前的状态）。
需要说明的是：animation-play-state的属性不能像起他的属性一样合写如animation当中，而需要单独设置。由于涉及到动画，截图无法展示，顾不放图了。
animation的兼容性在谷歌火狐opera以及Safari的浏览器上实现的比较好，而在IE上至少是IE10才能实现动画效果，比较坑。