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。