理解 CSS 动画：原理与入门 – wiki基地

深入理解 CSS 动画：原理、应用与入门精通

在现代网页设计中，动态效果早已不是可有可无的装饰，而是提升用户体验、传达信息、引导用户注意力的重要手段。从微小的悬停反馈到复杂的页面切换动画，都离不开动画技术的支持。而 CSS 动画，凭借其声明式的语法、良好的性能以及与页面结构的紧密结合，成为了前端开发者实现动画效果的首选工具之一。

本文将带你深入理解 CSS 动画的原理，从基础概念入手，详细解析其核心组成部分，并通过丰富的示例代码，帮助你快速掌握 CSS 动画的创建与控制，最终达到入门精通的水平。

1. CSS 动画是什么？为什么选择它？

1.1 定义

CSS 动画是一种使用 CSS 属性来定义和控制网页元素随时间变化的样式的方法。它允许开发者在不使用 JavaScript 的情况下，创建出从简单到复杂的动态效果。

不同于 CSS 过渡（Transitions）只能在两个状态之间平滑变化，CSS 动画可以定义一个由多个中间状态（称为“关键帧”）组成的复杂序列。这意味着你可以精确控制动画在任意时间点上的样式，实现更灵活、更丰富的效果。

1.2 为什么选择 CSS 动画？

相比于使用 JavaScript 来实现动画，CSS 动画具有以下显著优势：

性能更优： 现代浏览器对 CSS 动画进行了大量的底层优化，尤其是在使用 transform 和 opacity 等属性进行动画时，浏览器通常能够利用 GPU 进行硬件加速，从而获得更流畅、更高性能的动画表现。相比之下，JavaScript 动画有时可能会引起回流（reflow）或重绘（repaint），影响性能。
声明式语法： CSS 动画的语法是声明式的，直接在 CSS 规则中定义动画的行为。这使得动画的意图更加清晰、代码更易读、维护更方便。你只需要描述“元素应该如何动”，而不需要编写一步步改变样式的逻辑。
易于入门： 对于熟悉 CSS 的开发者来说，学习 CSS 动画的成本相对较低。它直接集成在 CSS 样式表中，与元素的样式定义紧密结合。
分离关注点： CSS 负责表现层，JavaScript 负责行为层。使用 CSS 动画能够更好地将表现与行为分离，使代码结构更清晰。
自动处理细节： 浏览器负责处理动画过程中的插值计算（interpolation），例如颜色、数值等属性的平滑过渡，这大大减轻了开发者的负担。

当然，CSS 动画也有其局限性，例如对于复杂、依赖用户交互或需要精确时间控制的动画，JavaScript（如使用 Web Animations API 或第三方库）可能更适合。但在许多常见的场景下，CSS 动画是实现动态效果的强大且高效的选择。

2. CSS 动画的核心组成：@keyframes 和 animation

CSS 动画主要由两大部分组成：

@keyframes 规则： 定义动画的序列。它指定了动画在不同时间点（或百分比）上元素应该具有的关键样式。你可以将其理解为动画的“剧本”或“分镜”。
animation 属性（或其子属性）： 将 @keyframes 规则应用到特定的 HTML 元素上，并控制动画的播放方式，例如持续时间、重复次数、播放方向等。这相当于将“剧本”交给一个“演员”（HTML 元素）去“表演”，并控制“表演”的各种参数。

理解并掌握这两者的协同工作方式，是理解 CSS 动画的关键。

2.1 `@keyframes` 规则：定义动画序列

@keyframes 规则是 CSS 动画的灵魂。它允许你创建自定义的动画序列，指定动画从开始到结束过程中，元素在不同时间点上的样式变化。

语法结构：

css @keyframes animationName { /* 关键帧列表 */ from { /* 开始时的样式 */ } to { /* 结束时的样式 */ } /* 或者使用百分比 */ 0% { /* 动画开始时的样式 */ } 25% { /* 动画进行到 25% 时的样式 */ } 50% { /* 动画进行到 50% 时的样式 */ } 100% { /* 动画结束时的样式 */ } }

animationName： 这是你为这个动画序列指定的名称，必须是唯一的标识符。在后续使用 animation-name 属性应用动画时会用到这个名称。
关键帧列表： 在 @keyframes 规则内部，你定义了一系列的关键帧。每个关键帧代表动画在某个特定时间点上的状态。
- from 和 to： from 等同于 0%，代表动画的起始状态；to 等同于 100%，代表动画的结束状态。这是最简单的定义方式，只包含两个关键帧。
- 百分比 (%)： 你可以使用 0% 到 100% 之间的任意百分比来定义关键帧。这允许你在动画过程中设置任意数量的中间状态，从而实现更复杂的动画效果。例如，50% 代表动画进行到一半时的状态。
关键帧样式： 在每个关键帧（无论是 from/to 还是百分比）的花括号 {} 内，你可以定义元素在该时间点上应该具有的 CSS 属性和值。浏览器会在关键帧之间进行插值计算，使属性值平滑过渡。

示例：简单的颜色变化动画

“`css
@keyframes colorChange {
from {
background-color: blue;
}
to {
background-color: red;
}
}

/ 或者使用百分比 /
@keyframes colorChangePercent {
0% {
background-color: blue;
}
100% {
background-color: red;
}
}
“`

示例：包含中间状态的位移和颜色变化动画

css @keyframes moveAndChange { 0% { transform: translateX(0); /* 起始位置 */ background-color: yellow; } 50% { transform: translateX(100px); /* 动画进行到一半时向右移动 100px */ background-color: orange; } 100% { transform: translateX(0); /* 动画结束时回到起始位置 */ background-color: yellow; } }

重要注意事项：

你可以为同一个关键帧定义多个 CSS 属性。
浏览器只能对可插值（interpolatable）的 CSS 属性进行平滑过渡，例如：
- 数值属性（width, height, margin, padding, font-size, top, left 等）
- 颜色属性（color, background-color, border-color 等）
- 变换属性（transform，包括 translate, rotate, scale, skew 等）
- 透明度（opacity）
- 部分其他属性，如 visibility (只能在 0% 和 100% 或相邻关键帧之间切换 hidden 和 visible)。
对于不可插值的属性（如 display, position），它们会在关键帧指定的时间点瞬间发生变化。通常这些属性只在 0% 或 100% 使用，或者在两个相邻的关键帧之间进行开关。
并非所有 CSS 属性都支持动画。

2.2 `animation` 属性及其子属性：控制动画播放

定义了 @keyframes 规则后，你需要使用 animation 属性或其子属性将这个动画应用到页面元素上，并控制它的播放行为。

animation 属性是一个复合（Shorthand）属性，它可以同时设置多个动画相关的属性。然而，为了更好地理解，我们先分解学习其各个子属性。

animation-name：
- 用途： 指定要应用的 @keyframes 规则的名称。
- 值：一个或多个 @keyframes 规则的名称，用逗号分隔。
- 示例： animation-name: myAnimation; 或 animation-name: animation1, animation2;
animation-duration：
- 用途： 指定一个动画循环完成所需的时间。
- 值：以秒（s）或毫秒（ms）为单位的时间值。必须为正值。
- 示例： animation-duration: 2s; 或 animation-duration: 500ms;
animation-timing-function：
- 用途： 定义动画在每个循环中如何随时间进行。也就是控制动画的速度曲线。
- 值：
  - ease (默认值): 动画慢速开始，然后加速，最后慢速结束。
  - linear: 动画以恒定速度进行。
  - ease-in: 动画慢速开始，然后加速。
  - ease-out: 动画加速，然后慢速结束。
  - ease-in-out: 动画慢速开始，加速，然后慢速结束。比 ease 更平滑。
  - cubic-bezier(x1, y1, x2, y2): 定义自定义的贝塞尔曲线速度。四个值都在 0 到 1 之间。这是最灵活的方式。
  - step-start: 等同于 steps(1, jump-start). 动画在开始时直接跳到最终状态。
  - step-end: 等同于 steps(1, jump-end). 动画在结束时直接跳到最终状态。
  - steps(number, position): 将动画分割成多个等步长的跳跃。number 是步数（必须大于 0）。position 可以是 jump-start, jump-end (默认), jump-none, jump-both，控制跳跃发生的时间点。
- 示例： animation-timing-function: ease-in-out; 或 animation-timing-function: cubic-bezier(0.17, 0.84, 0.44, 1);
animation-delay：
- 用途： 指定动画开始前的延迟时间。
- 值：以秒（s）或毫秒（ms）为单位的时间值。可以是正值（延迟播放）或负值（动画立即开始，但从动画序列的某个中间状态开始播放）。
- 示例： animation-delay: 1s; 或 animation-delay: -0.5s; (立即开始，从动画序列进行到 0.5 秒时的状态开始)
animation-iteration-count：
- 用途： 指定动画循环播放的次数。
- 值：一个非负整数（播放特定次数）或 infinite（无限次循环）。
- 示例： animation-iteration-count: 3; (播放 3 次) 或 animation-iteration-count: infinite; (无限循环)
animation-direction：
- 用途： 指定动画播放的方向。
- 值：
  - normal (默认值): 每次都向前播放 (从 0% 到 100%)。
  - reverse: 每次都向后播放 (从 100% 到 0%)。
  - alternate: 交替播放。第一次向前播放，第二次向后播放，第三次向前，依此类推。
  - alternate-reverse: 交替播放，但第一次是向后播放，第二次向前，依此类推。
- 示例： animation-direction: alternate;
animation-fill-mode：
- 用途： 指定动画在播放之前和之后，元素的样式如何应用 @keyframes 中的样式。
- 值：
  - none (默认值): 动画播放前，元素保持原样式。动画结束后，元素回到原样式。
  - forwards: 动画结束后，元素保持动画结束时的样式 (即 100% 或 to 关键帧的样式)。
  - backwards: 动画开始前，元素会立即应用动画开始时的样式 (即 0% 或 from 关键帧的样式，并考虑 animation-delay)。
  - both: 同时应用 forwards 和 backwards 的效果。动画开始前应用起始样式，动画结束后保持结束样式。
- 示例： animation-fill-mode: forwards;
animation-play-state：
- 用途： 控制动画是正在运行还是暂停。
- 值：
  - running (默认值): 动画正在播放。
  - paused: 动画暂停在当前帧。
- 示例： animation-play-state: paused; (通常通过 JavaScript 或伪类来实现暂停/播放)

animation 复合属性

为了简化代码，通常使用 animation 复合属性来设置上述多个属性。其语法顺序通常为：

animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state];

其中 animation-duration 和 animation-delay 都是时间值，必须按照这个顺序书写，或者通过省略其中一个来区分（不推荐省略，容易混淆）。其他属性值的顺序则比较灵活，浏览器可以根据值的类型来判断（例如，一个时间值是 duration，另一个是 delay；如果只有一个时间值，则一定是 duration）。但为了代码可读性，推荐遵循上述完整的顺序。

示例：

css .element { animation: slideIn 2s ease-out 1s infinite alternate forwards running; /* 分解： */ /* animation-name: slideIn; */ /* animation-duration: 2s; */ /* animation-timing-function: ease-out; */ /* animation-delay: 1s; */ /* animation-iteration-count: infinite; */ /* animation-direction: alternate; */ /* animation-fill-mode: forwards; */ /* animation-play-state: running; */ }

如果需要为一个元素应用多个动画，可以使用逗号将不同的动画设置分隔开：

css .element { animation: slideIn 2s ease-out, /* 动画 1 */ colorPulse 3s linear infinite; /* 动画 2 */ }
在这种情况下，animation-name, animation-duration 等子属性也可以用逗号分隔列表来指定对应的值。例如：
css .element { animation-name: slideIn, colorPulse; animation-duration: 2s, 3s; animation-timing-function: ease-out, linear; animation-iteration-count: 1, infinite; /* 其他属性可以省略，将使用默认值 */ }
这两种多动画的书写方式是等价的。

3. 入门实践：创建一个简单的 CSS 动画

理论知识学习得差不多了，现在让我们通过一个简单的例子来实践一下。我们将创建一个小方块，让它无限次地左右移动并改变颜色。

HTML 结构 (index.html):

“`html

CSS 动画入门

“`

CSS 样式 (style.css):

首先，给方块一些基础样式：

css .box { width: 100px; height: 100px; background-color: blue; margin: 50px auto; /* 居中显示 */ position: relative; /* 为了方便使用 left/right 进行位移 */ }

接下来，定义动画序列 @keyframes：

css /* 定义一个名为 moveAndColor 的动画 */ @keyframes moveAndColor { 0% { left: 0; /* 从左边 0 开始 */ background-color: blue; } 50% { left: 200px; /* 动画到一半时向右移动 200px */ background-color: green; } 100% { left: 0; /* 动画结束时回到左边 0 */ background-color: blue; } }
这里使用了 position: relative; 和 left 属性来进行位移。虽然更推荐使用 transform: translateX(); 进行位移以获得更好的性能，但使用 left 在入门时可能更直观。我们会在性能部分详细讨论。

最后，将动画应用到 .box 元素上，并控制播放：

“`css
.box {
width: 100px;
height: 100px;
background-color: blue;
margin: 50px auto;
position: relative;

/ 应用动画 /
animation-name: moveAndColor; / 使用上面定义的动画序列 /
animation-duration: 3s; / 动画一个循环需要 3 秒 /
animation-timing-function: ease-in-out; / 慢速开始和结束 /
animation-iteration-count: infinite; / 无限次循环 /
animation-direction: alternate; / 交替播放，先向右，再向左 /
}
“`

现在，在浏览器中打开 index.html 文件，你应该能看到一个蓝色方块在 3 秒内移动到右边并变成绿色，然后再在 3 秒内移动回左边并变回蓝色，这个过程无限重复。

使用复合属性简化代码：

上面的 animation 子属性可以合并成一句：

“`css
.box {
width: 100px;
height: 100px;
background-color: blue;
margin: 50px auto;
position: relative;

/ 使用复合属性 /
animation: moveAndColor 3s ease-in-out infinite alternate;
/ 省略了 animation-delay (默认 0s), animation-fill-mode (默认 none), animation-play-state (默认 running) /
}
“`
这使得代码更加简洁。

4. 进阶应用与注意事项

4.1 使用 `transform` 和 `opacity` 进行高性能动画

前面提到，浏览器对 transform 和 opacity 的动画有更好的优化，通常可以利用 GPU 进行硬件加速。因此，在可能的情况下，尽量使用 transform（如 translateX, translateY, scale, rotate）来实现位移、缩放、旋转等效果，使用 opacity 来实现淡入淡出。

修改上面的例子，使用 transform 实现位移：

“`css
/ 基础样式，不再需要 position: relative 和 left /
.box {
width: 100px;
height: 100px;
background-color: blue;
margin: 50px auto;
/ position: relative; / / 移除 /
}

/ 修改 keyframes 使用 transform /
@keyframes moveAndColorHighPerformance {
0% {
transform: translateX(0); / 从原始位置开始 /
background-color: blue;
}
50% {
transform: translateX(200px); / 向右移动 200px /
background-color: green;
}
100% {
transform: translateX(0); / 回到原始位置 /
background-color: blue;
}
}

/ 应用动画 /
.box {
/ … 其他基础样式 /
animation: moveAndColorHighPerformance 3s ease-in-out infinite alternate;
}
`` 这个版本的动画在性能上通常会优于使用left` 属性的版本，特别是在动画元素数量较多或页面结构复杂时。

避免动画的属性：尽量避免动画会触发浏览器进行“布局”（Layout/Reflow）或“绘制”（Paint）的属性，例如 width, height, margin, padding, top, left (不配合 transform), border, font-size 等。这些属性的变化可能会影响周围元素的位置和大小，导致浏览器需要重新计算整个页面的布局，这个过程开销较大，容易造成卡顿。相比之下，transform 和 opacity 通常只涉及元素的“合成”（Composite）阶段，效率更高。

4.2 多动画叠加

一个元素可以同时应用多个动画。这可以通过在 animation 复合属性或各个子属性中使用逗号分隔的值来实现。

示例：同时旋转和闪烁

“`css
/ 定义旋转动画 /
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

/ 定义闪烁（透明度变化）动画 /
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}

.box {
width: 100px;
height: 100px;
background-color: red;
margin: 50px auto;

/ 同时应用两个动画 /
animation:
rotate 4s linear infinite, / 旋转动画，持续 4s，线性，无限循环 /
pulse 1.5s ease-in-out infinite alternate; / 闪烁动画，持续 1.5s，慢速开始结束，无限交替循环 /
}
“`
这个例子中，方块会一边旋转一边透明度周期性变化。

4.3 `animation-fill-mode` 的深入理解

animation-fill-mode 是一个经常让新手感到困惑的属性。我们来详细解释一下它的几个值：

none (默认)：
- 动画开始前 (如果有 animation-delay): 元素保持原样式。
- 动画结束后: 元素回到原样式。
- 示例：一个元素有动画改变其背景色。动画结束后，背景色会立即跳回动画前的颜色。
forwards：
- 动画开始前: 元素保持原样式。
- 动画结束后: 元素保持动画结束时的样式 (即 @keyframes 中 100% 或 to 关键帧的样式)。
- 示例：背景色动画结束后，元素背景色会保持在动画结束时的颜色。
backwards：
- 动画开始前 (如果有 animation-delay): 元素会立即应用动画开始时的样式 (即 @keyframes 中 0% 或 from 关键帧的样式)。
- 动画结束后: 元素回到原样式。
- 示例：如果你设置了 2 秒的 animation-delay，并且 0% 关键帧设置了背景色为黄色，那么元素在动画开始前的 2 秒延迟期间，背景色就会是黄色，而不是它原本的背景色。动画结束后，背景色跳回原样式。
both：
- 动画开始前 (如果有 animation-delay): 元素会立即应用动画开始时的样式 (0%/from)。
- 动画结束后: 元素保持动画结束时的样式 (100%/to)。
- 示例：结合了 forwards 和 backwards 的效果。

理解 backwards 的关键在于 animation-delay。如果 animation-delay 是 0 或负值，backwards 的效果（在延迟期间应用起始样式）就不明显了。both 是最常用的值之一，因为它使得元素在动画开始前和结束后都能保持与动画序列相关的样式。

4.4 CSS 动画与 JavaScript 的交互

虽然 CSS 动画是声明式的，但有时我们需要使用 JavaScript 来控制动画的播放或响应动画的事件。

控制播放状态：

你可以通过改变元素的 animation-play-state 属性来暂停或继续动画。

“`javascript
const box = document.querySelector(‘.box’);

// 暂停动画
box.style.animationPlayState = ‘paused’;

// 恢复动画
box.style.animationPlayState = ‘running’;
`` 这常用于实现鼠标悬停暂停动画的效果（尽管使用 CSS 伪类:hover结合animation-play-state: paused;` 更常见）。

监听动画事件：

元素会触发以下与动画相关的事件：

animationstart：动画开始时触发。
animationend：一个动画循环结束时触发 (对于无限循环的动画不会触发)。
animationiteration：动画循环一次后触发 (在 infinite 动画中每次循环结束时触发)。

你可以使用 addEventListener 来监听这些事件：

“`javascript
const box = document.querySelector(‘.box’);

box.addEventListener(‘animationstart’, () => {
console.log(‘Animation started!’);
});

box.addEventListener(‘animationend’, () => {
console.log(‘Animation ended!’);
});

box.addEventListener(‘animationiteration’, () => {
console.log(‘Animation iterated!’);
});
“`
通过这些事件，你可以在动画的不同阶段执行 JavaScript 逻辑，例如移除动画结束后不再需要的元素，或者在动画循环时更新页面内容。

4.5 浏览器兼容性与前缀

过去，为了兼容不同的浏览器，需要在 @keyframes 规则和 animation 属性前加上浏览器引擎前缀，如 -webkit-, -moz-, -o-。

“`css
/ 示例：旧版写法 /
@-webkit-keyframes myAnimation { / … / }
@-moz-keyframes myAnimation { / … / }
/ … /
@keyframes myAnimation { / … / }

.element {
-webkit-animation: myAnimation 2s;
-moz-animation: myAnimation 2s;
/ … /
animation: myAnimation 2s;
}
`` 然而，随着现代浏览器对 CSS 动画标准的普遍支持，现在大多数情况下已经**不需要**添加这些前缀了。你可以直接使用标准的@keyframes和animation` 属性。如果你需要支持非常老的浏览器，可能仍然需要考虑添加前缀，但对于大多数现代 Web 开发而言，标准语法已经足够。可以使用 Can I use (https://caniuse.com/) 网站来查询特定 CSS 属性的浏览器兼容性。

4.6 辅助功能（Accessibility）考虑

对于动画，尤其是持续、闪烁或大幅度移动的动画，需要考虑对用户的辅助功能影响。一些用户可能对动画敏感，或者动画会分散他们的注意力。

减少动态效果的选项： 考虑提供一个选项，让用户可以关闭或减少页面上的动态效果。
使用 prefers-reduced-motion 媒体查询： 这是一个非常有用的 CSS 媒体查询，可以检测用户操作系统是否开启了“减少动态效果”的设置。

“`css
/ 默认动画 /
.element {
animation: myAnimation 5s infinite;
}

/ 如果用户开启了减少动态效果 /
@media (prefers-reduced-motion: reduce) {
.element {
animation: none; / 取消动画 /
/ 或者设置一个静态的最终状态 /
/ transform: translateX(200px); /
/ opacity: 0.5; /
}
}
“`
这是一个重要的最佳实践，能够极大地提升网站的可用性和包容性。

4.7 CSS 过渡 vs. CSS 动画：何时使用哪个？

虽然都用于创建动态效果，但 CSS 过渡（Transitions）和 CSS 动画（Animations）有本质区别：

CSS 过渡： 用于在元素的两个状态之间平滑地改变属性值。这些状态变化通常由用户交互（如 :hover, :focus）或通过 JavaScript 添加/移除类名触发。它更像是一种“反应式”的动态效果。你只需要指定哪些属性要过渡、过渡时间、速度曲线和延迟，浏览器会自动处理两个状态之间的平滑变化。
- 语法： 使用 transition 属性或其子属性 (transition-property, transition-duration, transition-timing-function, transition-delay)。
- 示例： 鼠标悬停时改变按钮背景色并平滑过渡。
CSS 动画： 用于创建多步的、预定义的动态序列。这些序列可以使用 @keyframes 精确控制任意时间点的样式。动画可以自动播放（页面加载时），不依赖于特定的用户交互（除非你用 JavaScript 控制）。它更像是一种“主动式”的动态效果。
- 语法： 使用 @keyframes 规则和 animation 属性或其子属性。
- 示例： 页面加载时元素飞入屏幕，或者一个无限循环的加载指示器。

简单总结：

如果你只需要在两个状态间平滑过渡，使用 CSS 过渡 通常更简单、更直接。
如果你需要更复杂的动画序列（包含多个中间状态）、自动播放的动画、循环播放或交替播放的动画，或者需要更精细的时间控制，使用 CSS 动画 是更合适的选择。

5. 总结与展望

通过本文的学习，我们深入理解了 CSS 动画的核心原理：使用 @keyframes 定义动画序列，再通过 animation 属性及其子属性将序列应用到元素并控制播放。我们学习了各个关键属性的用法，并通过实践例子掌握了基本的动画创建流程。此外，我们还探讨了性能优化、多动画叠加、与 JavaScript 的交互、浏览器兼容性以及重要的辅助功能考虑。

CSS 动画是前端开发工具箱中一个强大且必备的工具。掌握它不仅能让你的页面更具活力，还能在许多场景下提供比 JavaScript 更好的性能和更简洁的代码。

入门之后，你可以尝试创建更复杂的动画效果，结合伪元素 (::before, ::after) 创建纯 CSS 的加载动画或图形，或者探索更高级的主题，例如使用 CSS 变量来动态修改动画的参数。不断实践和尝试，你将能够运用 CSS 动画创造出令人惊艳的网页体验。

希望这篇文章能够帮助你更好地理解和使用 CSS 动画，打开通往精彩动态世界的大门！