CSS ：keyframes 和 animation

马黑黑 · 发表于 2023-2-10 13:46

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

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 秒后定时器会将它复原，以便可以再次单击矩形运行动画。