CSS3新特性(03)：Animation

CSS3中动画涉及到三个属性，一个是Transform：变形；一个是Transition：过渡，一个是Animation：动画。其中Transform、Animation可以搭配着使用，实现复杂动画，Transition可以实现简单动画。

有时候，Transition过渡不能解决我们想要的动画效果，我们希望动画的过渡程度更加复杂有层次，这个时候就要用到Animation。

当然CSS3中的Animation与HTML5中的Canvas绘制动画又不同，Animation只应用在页面上已存在的DOM元素上，做出来的动画相比较Flash、JavaScript及jQuery制作出来的动画效果稍显粗糙些。

Animation有下面这些属性：

属性	描述
animation	简写属性，用于在一个属性中设置8个动画属性
animation-name	规定需要绑定到选择器的keyframe名称
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。跟transition一样。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	规定动画应该播放的次数。默认1，也可以是infinite无限次
animation-direction	规定是否应该轮流反向播放动画。值为nomal\reverse\alternate\alternate-reverse。意思分别是正方向\反方向\往返\反方向的往返。
animation-fill-mode	规定动画开始的时候是否要保持开始的第一帧，结束是否保持最后一帧。其值为none\backwards\forwards\both。分别意思是不保持，开始保持，结束保持，和都保持。通常情况下是both设置。
animation-play-state	规定动画暂停还是播放，值为paused\running。一般搭配鼠标hover时候使用，比如鼠标移上去就动了的效果，就设置running。

（1）语法

animation:none;
animation:abc 2s ease 0s 1 nomal none running;
animation:abc 2s;
animation:abc 1s 2s both,abcd 2s both;

其中abc就是keyframe名称。keyframe是什么呢？我们把他叫做“关键帧”，玩过flash的朋友可能对这东西不会陌生。前面我们在使用transition制作transition过渡效果时，就包括了初始属性和最终属性，一个开始执行动作时间和一个延续动作时间以及动作的变换速率。

如果我们要控制的更细一些，比如要第一个时间段执行什么动作，第二个时间段执行什么动作，换到flash中说，就是第一帧执行什么动作，第二帧执行什么动作，这样用Transition就很难实现了，此时我们也需要这样的一个“关键帧”来控制。CSS3的Animation就是由“keyframes”这个属性来实现这样的效果。

如何定义keyframe的名称呢？有两种写法：

@keyframes abc{
      from{opacity:1;height:100px;}
      to{opacity:0.5;height:200px;}
}
 
@keyframes abc{
    0%{opacity:1;height:100px;}
    50%{opacity:0.8;height:200px;}
   100%{opacity:0.5;height:300px;}
}

分别是定义开始的状态属性参数，定义中间的状态属性参数，和定义结束时候的状态属性参数。当然如果属性参数是一样的，我们可以组合起来写，看下面：

@keyframes flash{
0%,50%,100%{opacity:1;}
25%,75%{opacity:0;}
}

定义了keyframes名称用来干嘛呢，就是下面的用处了，把 "keyframes名称" 捆绑到元素中去，比如div。

div {
animation:abc 0.5s both;
animation:flash 0.5s both;
animation:abc 0.5s both,flash 0.5s both;
}

Animation可以综合写一行，把所有的表格中的属性按照表格里上下的顺序写，也可以分开Animation的每个属性分开单独写。

（2）实例

.tools_iicon:hover{animation:rotate360 2s;}
@keyframes rotate360{
from{transform:rotate(0deg);}
to{transform:rotate(360deg);}
}

后记：这是原文地址《CSS3新特性(03)：Animation》，欢迎来我个人博客逛逛！