IT兄弟连 HTML5教程 CSS3属性特效 动画-animation

CSS3属性中有关于制作动画的三个属性：Transform，Transition，Animation。前面已经介绍过Transform和Transition了，这里我们来学习Animation动画。通过CSS3，我们能够创建动画，可以在许多网页中取代动画图片、flash动画以及JavaScript。

1  关键帧keyframes

如需在CSS3中创建动画，我们需要先学习@keyframes规则。前面所提到transition制作的过渡效果，包括了初始属性和最终属性，一个开始执行动作时间和一个延续动作时间以及动作的变换速率，其实这些值都是一个中间值。如果我们想要控制得更细一些，比如我们要第一个时间执行什么动作，第二个时间执行什么样的动作（就如flash中说的第一帧要执行什么，第二帧要执行什么动作），这样用transition就很难实现了，此时我们就需要这样的一个“关键帧”来控制。那么CSS3的animation的“keyframes”这个属性来实现这样效果。

@keyframes规则用于创建动画，在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。@keyframes的格式如下：

@keyframes动画名称{

     from{

properties: properties value;

}

percentage{

properties: properties value;

}

to{

properties: properties value;

}

}

或者

@keyframes动画名称{

     0%{

properties: properties value;

}

percentage{

properties: properties value;

}

100%{

properties: properties value;

}

}

其中percentage是百分比值，我们可以添加许多个这样的百分比，properties为css的属性名，比如说left，background等，value就是相对应的属性的属性值。值得一提的是，我们from和to 分别对应的是0%和100%。这个我们在前面也提到过了。

一起来看一个简单的实例，代码如下：

CSS animation动画效果将会影响元素相对应的css值，在整个动画过程中，元素的变化属性值完全是由animation来控制，动画后面的会覆盖前面的属性值。如上面例子：因为我们这个案例只是在不同的时间段改变了div的背景色和宽度，其默认值是：width:100px;background:red；但当我们在执行动画“from”时，div属性发生改变：width:100px,background:red；当执行到50%时，属性变成了：width:200px;background:blue;当动画 执行到“from”时，属性改变：width:400px;background: green；此时动画将完成，那么width和background两个属性值将是以“to”时的为主,他不会产生叠加效果，只是一次一次覆盖前一次出现的css属性。就如我们平时的css一样，最后出现的权根是最大的。当动画结束后，样式回到默认效果。下面是该动画过程的截图，如图1所示：

图1  animation动画执行

2  animation动画属性

animation的动画属性如表1-32:

表1-32  animation属性及描述

animation的动画属性包含必要属性和可选属性。必要属性包括animation-name（动画名称）、animation-duration（动画持续时间）、animation-play-state（播放状态），其余属性为可选属性。

对于上表中属性的设置，我们可以分别设置。这里以animation-timing-function规定动画的速度曲线为例。修改动画的速度曲线为“ease-in-out”，使动画先加速然后减速，修改wrap的CSS代码如下：

其余的动画属性也同样设置，读者感兴趣的话，可以为每个动画属性设置不同取值来深入了解animation。