css属性之帧动画属性（animation）

@keyframes规则

在介绍animation属性之前，先来认识一下@keyframes规则。

通过@keyframes规则可以创建动画，创建动画是逐步改变一个CSS样式到另一个CSS样式来实现的，CSS样式可以设置多个来实现动画过程，指定动画变化时用%，或者用关键字从"from"到"to"，这是和"0%"开始到"100%"结束相同效果的。

为了获得浏览器的稳定支持，建议使用%来实现。

书写：@keyframes my_animation_name {0% {css_styles;} 50% {css_styles;} 100% {css_styles;}}

或者 @keyframes my_animation_name {from {css_styles;} to {css_styles;}}

举例一个总体效果：

效果如下：

可以看出，所谓帧动画，就是通过创建帧改变CSS样式的实现的。

animation属性

animation属性设置动画的效果，它是一个复合属性。

书写：

animation: animation-name||animation-duration||animation-timing-function||animation-delay||animation-iteration-count||animation-direction||animation-state;

animation-name、animation-duration、animation-timing-function属性

这三个属性与过渡（transition）的三个属性是相似的。

-name,表示定义的帧动画名称，这里的name就是"my_animation_name"。

@keyframes my_animation_name {}

-duratin，表示动画完成所需的时间。

-timing-function，表示动画的过渡类型。linear表示匀速；ease表示慢速开始，中间加速，慢速结束；ease-in表示慢速开始；ease-out表示慢速结束；ease-in-out表示慢速开始和结束；

animation-delay属性

animation-delay表示动画延迟多少时间后开始执行。

animation-iteration-count

animation-iteration-count表示动画执行的次数。

书写：animation-iteration-count: n||infinite;    有限的循环次数或者是无限循环。

animation-direction

animation-direction表示动画在循环中是否反向播放。

属性值：

• normal，正常播放
• reverse，反向播放。
• alternate，奇数次正常播放，偶数次反向播放。
• alternate-reverse，奇数次反向播放，偶数次正常播放。

正常播放：

animation-direction: normal;

效果如下：

正常播放就是根据 设置的帧（如从0%到100%）的过程。

反向播放：

animation-direction: reverse;

效果如下：

反向播放就是根据 设置的帧（如从0%到100%）的反向过程播放（从100%到0%）。

animation-play-state

animation-play-state指定动画是否运行或暂停。

属性值：

• running，动画运行
• paused，动画暂停

animation-fill-mode属性

animation-fill-mode属性规定当动画不播放（动画播放完成，或因有延迟而未播放）时，应用到元素的样式。

属性值：

• forwards
• backwards
• both,同时遵循以上两个

下面就以animation实现一个逐帧动画效果：

先以"from""to"关键字实现的动画为例。

效果如下：

我们可以看出，动画是滑动的，并不是我们想要的效果，这是为什么呢?
原来animation是以ease为默认方式过渡的，它会在每个关键帧之间插入补间动画，所以是连贯的。

解决思路就是：

@keyframes myanimation {
    0%, 8%{  /*动作一*/  }
    9.2%, 17.2%{  /*动作二*/  }
    ...
}

step1：动作之间停留8帧，0%设置动作一，动作一结束在8%
step2：动作之间过渡1.2帧，9.2%设置动作二，动作二结束在17.2%

以下以"0%"到"100%"为例

效果如下：

以上只是animation属性的一个简单应用，它还有其它更为强大的功能用处，以后再介绍。