keyframes关键帧

其实对于“帧”这个概念平时接触是比较多的，比如电影或录制视频都会有“帧”的概念。下面我们就一起来看看动画中的这个keyframes是什么东西。前面我们在使用transition制作一个简单的transition效果时，我们包括了初始属性和最终属性，一个开始执行动作时间和一个延续动作时间以及动作的变换速率，其实这些值都是一个中间值，如果我们要控制的更细一些，比如说我要第一个时间段执行什么动作，第二个时间段执行什么动作（换到flash中说，就是第一帧我要执行什么动作，第二帧我要执行什么动作），这样我们用transition就很难实现了，此时我们也需要这样的一个“关键帧”来控制。那么CSS3的animation就是由“keyframes”这个属性来实现这样的效果，在CSS3中使用@keyframes规则来创建动画，kyeframes可以设置多个关键帧，每个关键帧表示动画过程中的一个状态。@keyframes规则的语法格式如下：

在上面的语法格式中，animationname表示当前动画的名称，它将作为引用时的唯一标识，不能为空。keyframes-selector是关键帧选择器，即指定当前关键帧要应用到整个动画过程中的位置值是一个百分比，from或者to。其中from或0%效果相同表示动画的开始，to和100%效果相同表示动画的结束。css-styles定义执行到当前关键帧时对应的动画状态，以上3个属性都是必需的，缺一不可。

通过案例6-15来体验应用CSS3的animation属性和关键帧@keyframes来完成一个简单的div移动和变色的效果。

先完成一个基本的页面，绘制一个div，宽度和高度为300，初始时在屏幕左上角，背景色为红色，在2s的时间内向右移动500px，并且背景色变为蓝色，代码如下

例6-15   example15.html

打开浏览器，运行代码，经过2s后，div往右移动500px，并且背景色变成了蓝色，整个背景色的变换过程非常平滑，而不是很生硬地直接变过去。