CSS 动画 入门指南 – wiki基地

作者： /

CSS 动画入门指南：让你的网页动起来！

在现代网页设计中，动画不再仅仅是可有可无的点缀，它们是提升用户体验、吸引注意力、引导用户视线、甚至传达信息的重要手段。而 CSS 动画，作为一种纯粹基于样式表实现的动画技术，以其易于使用、性能优越（在某些情况下）和无需 JavaScript 即可实现复杂效果的特点，成为了前端开发者手中强大的工具。

如果你是网页开发新手，或者虽然了解 CSS 但对动画感到陌生，那么这篇指南将带你一步步走进 CSS 动画的世界，从基础概念到核心属性，再到实战示例，让你掌握如何用 CSS 让你的网页元素“活”起来。

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

简单来说，CSS 动画允许你在不使用 JavaScript 的情况下，为 HTML 元素创建基于时间序列的动画效果。它通过定义一系列关键帧（Keyframes）来描述动画过程中元素不同状态的样式，然后通过 CSS 属性控制动画的播放方式、时长、循环次数等。

相较于传统的 JavaScript 动画库（如 jQuery 的 .animate()）或早期的 Flash 动画，CSS 动画具有以下优势：

  1. 性能优越： 浏览器对 CSS 动画进行了优化，尤其是在使用 transform 和 opacity 等属性时，可以利用 GPU 硬件加速，使得动画更加流畅。
  2. 易于使用： 对于简单的动画效果，使用 CSS 动画通常比编写 JavaScript 代码更简洁直观。
  3. 无需 JavaScript： 很多基础的动画效果可以直接在 CSS 文件中完成，降低了对 JavaScript 的依赖。
  4. 声明式： 动画的定义和元素的样式都在 CSS 中声明，代码结构清晰，易于维护。

当然，CSS 动画也有其局限性，例如难以实现基于用户交互的复杂序列动画（比如拖拽）、物理引擎效果等，这时可能需要结合 JavaScript 或使用专业的动画库。但对于绝大多数常见的网页动画需求，CSS 动画是首选的解决方案。

CSS 动画的构成要素：关键帧与动画属性

CSS 动画主要由两个核心部分构成：

  1. @keyframes 规则： 定义动画的骨架，描述动画在不同时间点的状态（即关键帧）。
  2. animation 属性（或其分解属性）： 将 @keyframes 定义的动画应用到特定的 HTML 元素上，并控制动画的播放行为。

理解并掌握这两部分是学会 CSS 动画的关键。

1. @keyframes 规则：定义动画的“剧本”

@keyframes 规则是 CSS 动画的灵魂。它允许你定义动画的名称，以及动画在不同时间点（百分比）或起始/结束状态（from/to）时元素的样式。

基本语法如下：

“`css
@keyframes animationName {
/ 关键帧定义 /
from {
/ 动画起始状态 (0%) 的样式 /
property: value;
/ … /
}

to {
/ 动画结束状态 (100%) 的样式 /
property: value;
/ … /
}
}
“`

或者使用百分比来定义多个关键帧：

“`css
@keyframes animationName {
0% {
/ 动画开始时的样式 /
property1: value1;
property2: valueA;
}

50% {
/ 动画进行到一半时的样式 /
property1: value2;
property2: valueB;
}

100% {
/ 动画结束时的样式 /
property1: value3;
property2: valueC;
}
}
“`

解释：

  • @keyframes：CSS 关键字，用于定义动画规则。
  • animationName：你为这个动画起的名字，可以是任意合法的 CSS 标识符。在应用动画时，你需要通过这个名字引用它。
  • from 和 to：等同于 0% 和 100%，分别代表动画的开始和结束状态。
  • 百分比 (0% 到 100%)：表示动画播放进度的不同时间点。你可以在 0% 和 100% 之间定义任意多的关键帧，从而创建更复杂的动画序列。

在每个关键帧内，你可以设置元素在此时刻应该拥有的 CSS 属性值。浏览器会在关键帧之间进行插值计算，使得属性值平滑地从一个关键帧过渡到下一个关键帧。

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

css
@keyframes color-change {
from {
background-color: blue;
}
to {
background-color: red;
}
}

这个 @keyframes 定义了一个名为 color-change 的动画，它会使元素的背景颜色从蓝色渐变为红色。

示例：一个更复杂的移动和旋转动画

css
@keyframes slide-and-rotate {
0% {
transform: translateX(0) rotate(0deg);
opacity: 1;
}
25% {
transform: translateX(100px) rotate(90deg);
}
50% {
transform: translateX(100px) rotate(180deg);
opacity: 0.5;
}
75% {
transform: translateX(0) rotate(270deg);
}
100% {
transform: translateX(0) rotate(360deg);
opacity: 1;
}
}

这个动画让元素先向右移动并旋转 90 度，然后在原地继续旋转并改变透明度，最后回到原位完成一个完整的 360 度旋转，同时透明度恢复。

注意： @keyframes 规则本身不会让任何元素动起来，它只是定义了动画的蓝图。你需要将这个蓝图应用到具体的元素上。

2. animation 属性：将动画应用到元素并控制播放

定义好 @keyframes 后，就可以使用 animation 属性（或其分解属性）将动画应用到元素上，并控制其播放方式。animation 属性是一个简写属性，它包含了控制动画行为的多个子属性：

  • animation-name: 动画的名称，即 @keyframes 规则中定义的名称。必需。
  • animation-duration: 动画播放一次所需的时间。单位为秒 (s) 或毫秒 (ms)。必需。
  • animation-timing-function: 动画的速度曲线。决定了动画在播放过程中的速度变化。
  • animation-delay: 动画开始前的延迟时间。单位为秒 (s) 或毫秒 (ms)。
  • animation-iteration-count: 动画播放的次数。可以是数字，或者 infinite 表示无限循环。
  • animation-direction: 动画播放的方向。
  • animation-fill-mode: 动画播放前和播放后元素的样式。
  • animation-play-state: 动画的播放状态，running 或 paused。

animation 简写属性的语法：

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

这是一个简写形式，你可以按顺序省略后面的属性（除了 name 和 duration 是最基础的）。浏览器通过值的类型来区分属性，例如，第一个时间值总是 duration，第二个时间值（如果存在）是 delay。

示例：应用上面的 color-change 动画

“`css
.my-element {
width: 100px;
height: 100px;
/ 应用动画 /
animation: color-change 2s infinite alternate; / name, duration, iteration-count, direction /
}

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

这段代码会将 color-change 动画应用到所有类名为 .my-element 的元素上。动画将持续 2 秒，无限次循环播放，并且方向在每次循环时交替（从蓝到红，再从红到蓝）。

接下来，我们详细讲解每个子属性的作用。

animation-name

  • 值： @keyframes 规则的名称，或 none (无动画)。
  • 作用： 指定要应用到元素的 @keyframes 规则。

示例：

css
.element-with-animation {
animation-name: my-custom-animation;
}

animation-duration

  • 值： 一个时间值，如 2s (2 秒) 或 500ms (500 毫秒)。不能为负值。
  • 作用： 定义动画完成一个周期所需的时间。

示例：

“`css
.element-slow-animation {
animation-name: slide;
animation-duration: 5s; / 动画持续 5 秒 /
}

.element-fast-animation {
animation-name: slide;
animation-duration: 0.5s; / 动画持续 0.5 秒 /
}
“`

animation-timing-function

  • 值： 预设关键字 (ease, linear, ease-in, ease-out, ease-in-out), cubic-bezier(x1, y1, x2, y2), steps(number_of_steps, direction). 默认值是 ease。
  • 作用： 定义动画的速度曲线。
    • ease: 默认值，慢速开始，然后加速，最后慢速结束。
    • linear: 匀速播放。
    • ease-in: 慢速开始。
    • ease-out: 慢速结束。
    • ease-in-out: 慢速开始和结束。
    • cubic-bezier(): 自定义贝塞尔曲线，提供更大的灵活性。
    • steps(): 将动画分割成离散的步进，而不是平滑过渡，常用于逐帧动画效果。

示例：

“`css
.element-linear {
animation-name: move;
animation-duration: 2s;
animation-timing-function: linear; / 匀速移动 /
}

.element-steps {
animation-name: sprite-animation;
animation-duration: 1s;
animation-timing-function: steps(10, end); / 分为 10 步跳跃播放 /
}
“`

animation-delay

  • 值： 一个时间值，如 1s 或 200ms。可以是负值。默认值是 0s。
  • 作用： 定义动画开始前的延迟时间。正值表示延迟多少时间后开始，负值表示动画立即开始，但从动画的第 N 秒处开始播放（N 是 animation-delay 的绝对值）。

示例：

“`css
.element-delayed {
animation-name: fade-in;
animation-duration: 1s;
animation-delay: 2s; / 延迟 2 秒后开始 /
}

.element-start-midway {
animation-name: rotate;
animation-duration: 4s;
animation-delay: -2s; / 立即开始，但从动画的第 2 秒处开始播放 /
}
“`

animation-iteration-count

  • 值： 一个非负数字，或关键字 infinite。默认值是 1。
  • 作用： 定义动画播放的次数。infinite 表示无限循环。

示例：

“`css
.element-twice {
animation-name: bounce;
animation-duration: 1s;
animation-iteration-count: 2; / 播放两次 /
}

.element-loop {
animation-name: pulse;
animation-duration: 1.5s;
animation-iteration-count: infinite; / 无限循环 /
}
“`

animation-direction

  • 值： normal, reverse, alternate, alternate-reverse。默认值是 normal。
  • 作用： 定义动画播放的方向。
    • normal: 每次循环都向前播放 (0% -> 100%)。
    • reverse: 每次循环都向后播放 (100% -> 0%)。
    • alternate: 奇数次向前播放 (0% -> 100%)，偶数次向后播放 (100% -> 0%)。需要 animation-iteration-count 大于 1 才能看到效果。
    • alternate-reverse: 奇数次向后播放 (100% -> 0%)，偶数次向前播放 (0% -> 100%)。需要 animation-iteration-count 大于 1 才能看到效果。

示例：

css
.element-alternate {
animation-name: slide-right;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate; /* 来回播放 */
}

animation-fill-mode

  • 值： none, forwards, backwards, both。默认值是 none。
  • 作用： 定义动画在播放前（有延迟时）和播放后元素的样式。
    • none: 默认值。动画播放前不应用任何样式；动画播放后，元素恢复到应用动画前的样式。
    • forwards: 动画播放结束后，元素将保持其在动画最后一帧 (100% 或 to) 定义的样式。
    • backwards: 动画播放前（在延迟期间），元素将立即应用动画第一帧 (0% 或 from) 定义的样式。
    • both: 结合了 forwards 和 backwards 的效果。在延迟期间应用第一帧样式，动画结束后保持最后一帧样式。

这是一个容易混淆但非常有用的属性。理解 backwards 的关键在于它在延迟期间就开始应用样式。

示例：

“`css
.element-forwards {
animation-name: move-out;
animation-duration: 1s;
animation-fill-mode: forwards; / 动画结束后停留在最终位置 /
}

.element-backwards {
animation-name: fade-in;
animation-duration: 1s;
animation-delay: 2s;
animation-fill-mode: backwards; / 延迟期间就应用 0% 的样式（比如 opacity: 0）/
}

.element-both {
animation-name: grow-and-stay;
animation-duration: 1s;
animation-delay: 1s;
animation-fill-mode: both; / 延迟时应用 0% 样式，结束后停留在 100% 样式 /
}

@keyframes move-out {
to { transform: translateX(100px); }
}

@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}

@keyframes grow-and-stay {
0% { transform: scale(0.5); }
100% { transform: scale(1.5); }
}
“`

animation-play-state

  • 值： running, paused。默认值是 running。
  • 作用： 控制动画是播放还是暂停。这个属性主要用于通过 JavaScript 动态控制动画的播放状态，但你也可以在 CSS 中定义它，比如通过 :hover 伪类来实现鼠标悬停暂停动画。

示例：

“`css
.element-paused {
animation-name: rotate;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-play-state: paused; / 初始状态为暂停 /
}

.element-paused:hover {
animation-play-state: running; / 鼠标悬停时开始播放 /
}
“`

多个动画效果

一个元素可以同时应用多个动画。只需要在 animation 属性中用逗号分隔不同的动画组即可。每个动画组对应一个 @keyframes 规则及其相应的动画属性。

示例：

“`css
.multi-animated-element {
width: 50px;
height: 50px;
background-color: green;
/ 同时应用两个动画：旋转和闪烁 /
animation:
rotate 3s linear infinite,
blink 1s steps(2, start) infinite alternate;
}

@keyframes rotate {
to { transform: rotate(360deg); }
}

@keyframes blink {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
“`

在这个例子中，元素会一边匀速旋转，一边快速地闪烁。

CSS Transitions vs. CSS Animations

初学者常会将 CSS 动画 (animation) 和 CSS 过渡 (transition) 混淆。虽然它们都能实现元素的动态变化，但用法和适用场景有所不同：

  • CSS Transitions (过渡):

    • 用于在元素的两个状态之间平滑地过渡。
    • 通常需要一个触发事件（如 :hover, :focus, 类名改变等）来启动过渡。
    • 使用 transition 属性定义。
    • 更适合简单的状态变化效果。

  • CSS Animations (动画):

    • 可以定义多于两个状态的复杂序列变化。
    • 可以使用 @keyframes 定义详细的时间线。
    • 可以自动播放（无需事件触发，页面加载后即刻播放）。
    • 使用 animation 属性和 @keyframes 规则定义。
    • 更适合复杂的、自动播放的、或需要精确控制时间序列的效果。

理解两者的区别有助于你在不同场景下选择合适的技术。

实践示例：创建一个简单的“跳动”动画

让我们用学到的知识创建一个简单的元素“跳动”动画。

“`html




CSS Animation Example



“`

代码解释：

  1. 我们创建了一个类名为 box 的 div 元素，设置了宽高、背景色和边距。
  2. position: relative; 是为了让 top 属性能够相对于元素的初始位置进行定位变化。
  3. 在 .box 的样式中，我们使用 animation 简写属性应用了动画：
    • bounce: 动画名称，对应下面的 @keyframes bounce。
    • 1s: 动画持续时间为 1 秒。
    • ease-in-out: 速度曲线，慢入慢出，模拟自然跳跃减速和加速过程。
    • infinite: 无限循环播放。
    • alternate: 来回播放，即从 0% 到 100% 再到 0% 循环。
  4. @keyframes bounce 规则定义了动画的三个关键帧：
    • 0%: 元素的 top 属性为 0，即在初始位置。
    • 50%: 元素的 top 属性为 -30px，向上移动 30 像素（最高点）。
    • 100%: 元素的 top 属性回到 0，回到初始位置。

运行这段代码，你会看到一个蓝色方块在页面上不断地向上跳跃并落下。

性能与兼容性

  • 性能： 如前所述，动画 transform (translate, scale, rotate, skew) 和 opacity 属性通常性能最好，应优先使用。动画其他属性（如 width, height, margin, padding, top, left 等）可能会引起页面布局重排（Reflow），影响性能，应尽量避免在高性能要求的动画中使用。
  • 浏览器兼容性： 现代浏览器对 CSS 动画的支持已经非常好。过去需要添加浏览器前缀（如 -webkit-, -moz-, -o-），现在大多数情况下已经不需要了，但为了保险起见，或者兼容较旧版本的浏览器，有时仍会看到前缀的使用。你可以查阅像 Can I Use (caniuse.com) 这样的网站来获取最新的兼容性信息。

总结

恭喜你！通过阅读这篇指南，你应该已经对 CSS 动画有了比较全面的入门了解。我们学习了：

  • CSS 动画是什么以及它的优势。
  • 核心构成部分：@keyframes 规则用于定义动画序列。
  • animation 属性及其各个子属性 (animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state) 用于控制动画播放。
  • 如何为一个元素应用多个动画。
  • CSS 动画与 CSS 过渡的区别。
  • 一个简单的实战示例。
  • 以及性能和兼容性方面的考虑。

CSS 动画功能强大且灵活，允许你创建从简单的淡入淡出到复杂的加载效果和游戏动画。掌握 CSS 动画是成为一名优秀前端开发者的重要一步。

学习动画最好的方式是实践。尝试修改上面的示例，改变属性值，添加更多的关键帧，尝试不同的速度曲线和填充模式。在你自己的项目中应用学到的知识，解决实际的动画需求。

祝你在 CSS 动画的学习旅程中享受乐趣，并创造出令人惊叹的网页效果！

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注

滚动至顶部