第四十一课：CSS3 animation详解

animation是css3的另一个重要的模块，它成型比transition晚，吸取了Flash的关键帧的理念，实用性高。

animation是一个复合样式，它可以细分为8个更细的样式。

（1）animation-name

为@keyframes动画（以@keyframes开头的样式规则，我们称为关键帧样式规则）规定名称。默认为none，规定无动画效果。

（2）animation-duration

动画持续的时间，单位为s或ms。默认为0，规定没有动画效果。

（3）animation-timing-function

缓动公式，默认为ease。

（4）animation-delay

动画延迟多久，才开始执行。默认为0.

（5）animation-iteration-count

动画播放的次数，值可以为正整数或infinite（无限次播放）。默认只执行一次。这是一个很好的设计，不像transition，只要改变指定样式值，就会触发transition的动画执行。

（6）animation-direction

动画执行的方向，有4个值：normal，alternate，reverse，alternate-reverse。默认值为normal。normal就是动画正常播放，也就是说从第一帧（@keyframes中0%或from定义的样式，不写，浏览器会自动补上）开始播放。alternate，代表动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后往前播放。显然这个值在animation-iteration-count大于1时才有效。reverse和alternate-reverse在最早制定的规范中没有，因此有兼容性问题，这里不讲。

（7）animation-fill-mode

此属性规定动画在播放之前或之后，其动画效果是否可见（也就是说规定动画时间之外的状态）。默认值为none。其属性值是由逗号分隔的一个或多个填充模式关键词。

none ：不改变默认行为。默认行为是不设置对象动画之外的状态。
forwards： 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards： 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both： 向前和向后填充模式都被应用。也就是说上面两个状态都设置。

这4个值的设置效果，大家可以去看一下这个例子：http://www.w3chtml.com/css3/properties/animation/animation-fill-mode.html。none和backwards的状态是一样的，forwards和both的状态是一样的。

（8）animation-play-state

用于暂停或继续此动画。默认值：running。

paused 规定动画已暂停。 
running 规定动画正在播放。

您可以在 JavaScript 中使用该属性，这样就能在播放过程中暂停动画。

前面6个可以连写在一起。比如：animation:name 2s ease 3s infinite alternate

我们来举个例子说下animation如何使用的：

<style>

　　#test{

　　　　width:100px;height:100px;background:red;

　　　　-webkit-animation: cicle 1s infinite alternate;

　　　　animation: cicle 1s infinite alternate;

　　}

　　@keyframes circle {

　　　　100%{

　　　　　　border-radius:50px;

　　　　}

　　}　

　　@-webkit-keyframes circle {

　　　　100%{

　　　　　　-webkit-border-radius:50px;   //设置test元素的四个角，为椭圆（当值为width的一半时，就会变成圆）。

　　　　}

　　}

</style>

上面的这个例子，会将test元素不断的从一个正方形变成一个圆形，然后圆形再变成正方形，周而复始，可见用css3实现一个动画是如此的方便。

此外，animation还配套了3种事件，分别用于开始时（animationstart），结束时（animationend），重复播放时（animationiteration）。当然这些事件名不能直接使用，需要加上私有前缀。那如何来获取这个名字呢？其实跟transition理念一样。

var getAnimationEventName = function(){

　　var obj = {

　　　　"AnimationEvent":"animationend",

　　　　"WebKitAnimationEvent":"webkitAnimationEnd"

　　};

　　......    //下面跟transition那一课的代码一样

}

下一课，将使用css3 animation做一个动画引擎。使用css3做动画引擎，在移动端很有优势，但是在pc端，因为animation在IE10才支持，所以就不能使用css3 animation，这时我们就需要退回基于javascript的动画引擎。下一课难度很大，请做好准备。

 

 

 

加油！