细说css3的动画（1）animation属性

用程序做过动画的同学再看下面的这篇讲解，或许会非常熟悉（不同程序写动画语法可能稍微不太一样，但很多的思想和原理都是相同的）。

1、再介绍css3动画前，先普及一下一些动画相关的概念：

帧(frame)：通过去的胶片电影一样，几十张图连起来放就是动画，一张图就是一帧，人眼识别的极限大概是24帧/秒（看不出间断）。而即便是黑科技满天飞的今天，动画的基本组成部分也离不开“帧”。

补间动画(Tween Animation)：从某一帧过度到另一帧有一定数学规律的连贯的动画。比如一个图片从a点匀速运动到b点的动画、亦或是匀变速运动、以抛物线的速度曲线运动等等，当然也不只是规定运动，也可以规定动画的变化是匀变速等，如变大变小、圆变方、变色、旋转等。

2、简单说说css3动画执行的原理

（1） css3中新增了一个animation的属性，该属性类似于创建一个animation对象

如：animation: bounce 2.0s infinite ease-in-out;

animation有以下几个参数：

属性	描述	CSS
animation	所有动画属性的简写属性，除了 animation-play-state 属性。	3
animation-name	规定 @keyframes 动画的名称。	3
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。	3
animation-timing-function	规定动画的速度曲线。默认是 "ease"。	3
animation-delay	规定动画何时开始。默认是 0。	3
animation-iteration-count	规定动画被播放的次数。默认是 1。	3
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。	3
animation-play-state	规定动画是否正在运行或暂停。默认是 "running"。	3
animation-fill-mode	规定对象动画时间之外的状态。	3

除了第一个，我依次介绍：

animation-name:这里是一个键值，通过@keyframes 该键值{ 每帧画面 }，从0%帧~n%帧的动作变化（注：后面详细说明）

animation-duration:一轮动画总时间s或ms

animation-timing-function:补间动画规则（注：后面详细说明）

animation-delay:动画是否延时播放，延时多少s或ms

animation-iteration-count:动画是否循环，循环多少次，无限循环是“infinite”

animation-direction:正向播放完再逆向播放是“alternate”，只正向播放是“normal”

animation-play-state:控制动画运行或暂停，暂停是“paused”，运行是“running”（一般是通过js来控制这个属性）

animation-fill-mode:属性规定动画在播放之前或之后，其动画效果是否可见。（效果在keyframes 中设定）

“none”不改变默认行为。

              “forwards”当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
              “backwards”在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
                “both”向前和向后填充模式都被应用。

（2）通过上面创建了animation的对象后，我们就可以一帧一帧的画图了

在animation-name中定义了一个key值，用它来构建每帧的样式，如下例：