CSS3 关键帧动画（@keyframes）

在设计动画效果时，关键帧动画是一个很重要的功能，它设置了一段连续的动画。

1.关键帧动画（@keyframes）

@keyframes语法：@keyframes: {{}}

其取值说明如下：

:动画的名称。必须定义一个动画的名称，方便与动画属性animation绑定。

:动画持续时间的百分比，也可以是from和to。from对应的是0%，to对应的

是100%，建议使用百分比。

:设置一个或多个合法的样式属性。要实现动画，必须设置样式属性。

注：使用动画属性来控制动画的实现，其中关键帧动画是通过名称与动画绑定的。

2.动画的实现（animation属性）

animation属性，是专门用于动画设计的，它能把一个或多个关键帧动画绑定到元素上，以实现更加

复杂的动画。

animation属性是一个复合属性，包含6个子属性：animation-name、animation-duration、

animation-timing、animation-delay、animation-iteration-count、animation-direction；

对于子属性，可在其前面加上不同的前缀，以适应不同内核的浏览器。

animation语法：animation：  

；

其取值说明如下：

:定义动画的名称，绑定指定的关键帧动画。其语法为：animation-name:|none;

none是默认值，表示没有动画；指定动画名称，即指定名称对应的动画关键帧。

:定义动画播放的周期时间。其语法为：animation-duration：;

用于指定播放动画的时间长度，单位为秒(s)或毫秒(ms)

:定义动画的播放方式。其语法如下：

animation-timing-function:ease  |  linear  |  ease-in  |  ease-out  |  ease-in-out  |  cubic-bezier(n,n,n,n);

其具体的动画播放的属性值，可参考transition-timing-function中的属性值。

 :定义动画的延迟时间。语法为：animation-delay:;表示时间，单位为秒(s)或毫秒(ms)

  定义动画应该播放的次数。语法为：animation-iteration：infinite|;

infinite表示无限次的播放动画；表示动画播放的次数，默认值为1，表示只播放一次。

:定义动画播放的顺序方向。语法为：animation-direction：normal|alternate；

normal表示按照关键帧设定的动画方向播放；alternate表示动画的播放方向与上一播放周期相反，第一周期的

播放方向还是正常的播放方向。

可参照下面的例1，来理解关键帧动画

例1：关键帧动画

图1：动画开始阶段

图2：动画中间阶段

图3：动画结束阶段

其代码如下：