CSS3 关键帧动画（@keyframes）

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

1.关键帧动画（@keyframes）

@keyframes语法：@keyframes<animation-name>: {<keyframes-selector>{<CSS-styles>}}

其取值说明如下：

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

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

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

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

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

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

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

复杂的动画。

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

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

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

animation语法：animation：<name> <duration> <timin