animation 将CSS关键帧动画即 keyframes 动画绑定到所需元素，令该元素再web页中运行动画。


那么，我们得先设计一个CSS关键帧动画。CSS关键帧动画的语法为：


        @keyframes 动画名称 { 动画内容 }


@keyframes 是CSS编写动画的关键字；动画名称自己命名，然后是一对花括号 {}，花括号里面是描述动画内容的代码。


动画内容基于CSS各类属性，可以是元素的尺寸与位置、文本大小和颜色、transform转换（如：旋转 rotate）等等。试着参考如下示例：


@keyframes move {
        0% { left: 20px; }
        100% { left: 600px; }
}


上面名称为 move 的关键帧动画，开始时（0%）运动对象（调用move的元素）的位置在 20px 处，结束时的位置在 600px 处。其中，left 属性用于规定元素的位置，而 0% 和 100% 用于描述动画在一个运行周期里的时间节点，如果时间节点只有头尾两个，上述代码可以用另一种方式表示：


@keyframes move {
        from { left: 20px; }
        to { left: 600px; }
}


from 是 从…… 的意思，to 是 到…… 的意思。假设运动对象事先定义了 left （初始）值，from 句还可以省略：


@keyframes move {
        to { left: 200px; }
}


强调一下：用 from ... to ... 来描述关键帧动画需要一个前提，即动画只有开始和结束两个时间节点。


用百分比描述动画，可以更加细化不同时段的动画状态，试参考如下示例：


@keyframes move {
        0% { left: 20px; background: olive; }
        20% { left: 300px; background: red; }
        40% { left: 0px; background: green; }
        80% { left: 600px; background: purple; }
        100% { left: 450px; background: darkred; }
}


这里，时间节点分为5个，每一个时间节点运动对象的位置都不同，背景颜色也在不断改变。这些变化说过渡性质的，位置和背景色的变化在 animation 指定的时间内逐渐完成，不是瞬间变化。


以上是关键帧动画的介绍，现在怎么调用我们编写好的 move 动画。这需要用到 animation 属性，它因为参数多会很复杂，不过我们先来容易的：在CSS选择器里使用 animation 属性给元素绑定关键帧动画并以最简单的方式令动画得到执行。假设我们有一个 id="mybox" 的 HTML 元素，请看 #mybox 选择器的代码示例：


#mybox {
        position: relative;
        left: 20px;
        width: 60px;
        height: 40px;
        background: pink;
        animation: move 4s forwards;
}


#mybox选择器的解释：


position: relative; 规定了元素的相对定位。元素只有定位后，left 属性才有效。除了relative，还可以是 absolute（就对定位）等。


left: 20px; 设定左边初始值。


width: 60px; 和 height: 40px; 设置了元素的宽高尺寸。


background: pink; 设定了元素的背景色。


animation: move 4s forwards; 是动画执行的关键所在，move 是前面在 keyframes 里编写的关键帧动画的名称；4s 是动画运行的一个周期的用时即周期时长，换句话说，就是运行一个完整的动作所需的时间；forwards 参数表示动画结束时的状态：停在最终状态。


animation 其实有很多参数，共 8 个，在简写语句中，他们一般按如下顺序排列：


        语句：animation: ①动画名称 ②周期时长 ③过渡类型 ④延时时间 ⑤重复次数 ⑥是否反向 ⑦最终状态 ⑧是否运行动画
        示例：animation: move 4s linear 0s 100 none forwards running;


上面的示例，对应着其上的语句，但其实我们不必每一个参数都写出来，可根据需要省略不必要的参数。比方说，我们只需要运行动画 move 一次，它可以简单到如下语句：


        animation: move 4s;


动画名称和动画运行的周期时长不能省略，这两个是必须参数，其他的参数可根据需要设置。请再参考如下语句：


        animation: move 4s linear 10s infinite alternate;


它表示，动画 move 按这样的方式运行：4秒一个周期，线性匀速运动，延时10秒（下达指令后过10秒才运行动画），循环不止，反向运动（就是执行完 @keyframes 描述的变化后再反向变化一次，这个动作也占用4秒，正向和反向共用8秒）。


另外，animation参数的顺序不是很严格，但名称必须在前面，周期时长必须在延时时间之前。


最后给出这 8 个参数的含义、取值等相关说明供实际使用时参考——


① animation-name ：动画名称


② animation-duration ：动画持续时间，必须带上时间单位，s或者ms均可


③ animation-timing-function ：动画过渡类型，linear（线性过渡），ease（平滑过渡），ease-in（由慢到快），ase-out（由快到慢），ease-in-out（由慢到快再到慢）


④ animation-delay ：动画延迟时间，必须带上时间单位，s或者ms均可


⑤ animation-iteration-count ：动画循环次数，缺省时运行1次，可用数字表示（无单位），infinite 为循环不止


⑥ animation-direction ：动画是否反向运动，normal（正常方向），reverse（反方向运行），alternate（动画先正常运行再反方向运行并持续交替运行，alternate-reverse（动画先反运行再正方向运行，并持续交替运行），


⑦ animation-fill-mode ：动画结束是的状态，backward（回到初始状态），forwards（停在最终状态），none，both


⑧ animation-play-state ：动画运行状态，即是否要运行，running（运行）、paused（暂停）


如果觉得简写语句不好掌握，可以分开来写，若此，#mybox 选择器的代码则可以像如下这么写：


#mybox {
        position: relative;
        left: 20px;
        width: 100px;
        height: 100px;
        background: pink;
        animation-name: move; /* 动画名称 move */
        animation-duration: 4s; /* 周期时长 4秒 */
        animation-timing-function: linear; /* 过渡类型 线性变化 */
        animation-delay: 0s; /* 延时时间 0秒（缺省值） */
        animation-iteration-count: 5; /* 运行次数 5次 */
        animation-direction: normal; /* 运行反向 正常（默认值） */
        animation-fill-mode: none; /* 结束状态 不设置（） */
        animation-play-state: running; /* 是否运行 运行 */
}


8 个参数我们都一一给出了，这是好习惯但不是必须的：除了名称和周期时长，其他的参数如果不需要，都可以删掉，一切根据需要来设定。


下楼给出一个例子，大家可以单击小矩形让动画运行起来，以观察关键帧动画的运行。提示一下：@keyframes 所定义的动画是在 left: 450px; 处停止，但 3 秒后定时器会将它复原，以便可以再次单击矩形运行动画。

前一篇: 小白也做音频播放控制器
下一篇: 中英文颜色对照表