从零开始学习 CSS animation – wiki基地

---

从零开始学习 CSS Animation：让你的网页动起来！

在现代网页设计中，动态效果已经不仅仅是锦上添花，它们是提升用户体验、吸引注意力、引导用户交互的重要手段。从微小的悬停效果到复杂的页面过渡，动画无处不在。而 CSS Animation，作为浏览器原生支持的动画技术，以其高性能、易用性和声明式语法，成为了前端开发者不可或缺的工具。

如果你是前端新手，或者从未接触过 CSS 动画，这篇文章将带你从零开始，一步步揭开 CSS Animation 的神秘面纱，让你也能为自己的网页注入活力。

为什么学习 CSS Animation？

在深入学习之前，我们先来了解一下为什么值得花时间学习 CSS Animation：

1. 提升用户体验 (UX)： 动画可以为用户提供视觉反馈（比如按钮点击的涟漪效果），引导用户关注重要内容（比如新消息提示的闪烁），或者平滑地过渡状态（比如页面加载时的进度条）。
2. 增强视觉吸引力： 适当的动画能让网页看起来更生动、更有趣，提升整体的设计感和专业度。
3. 高性能： 现代浏览器对 CSS Animation 进行了优化，尤其是对 opacity 和 transform 属性的动画，通常能利用 GPU 进行硬件加速，提供更流畅的动画效果，即使在性能较低的设备上也能表现良好。
4. 易于实现： 相比使用 JavaScript 实现复杂动画，纯 CSS Animation 通常更简洁、更易于维护（对于非交互驱动的动画）。
5. 浏览器原生支持： 无需引入额外的库或框架（除非需要更复杂的交互或时间线控制），CSS Animation 是浏览器自带的功能。

准备工作：你需要知道什么？

虽然是从零开始学习 CSS Animation，但你需要具备一些基础知识：

• HTML 基础： 了解 HTML 元素的结构、标签以及如何创建基本的页面骨架。
• CSS 基础： 了解 CSS 选择器、属性（如 width, height, background-color, opacity, transform 等）以及如何将 CSS 应用于 HTML 元素。

如果你已经掌握了这些基础，那么恭喜你，你已经准备好进入 CSS Animation 的世界了！

CSS Animation 的核心：@keyframes 规则

CSS Animation 的核心是 @keyframes 规则。它就像是动画的“剧本”或“时间表”，定义了动画在不同时间点的状态（也就是元素在动画过程中应该呈现的样式）。

@keyframes 规则的基本语法如下：

“`css
@keyframes animation-name {
/ 动画开始时的状态 /
from {
/ CSS 属性 /
}

/ 动画结束时的状态 /
to {
/ CSS 属性 /
}
}
“`

或者使用百分比来定义动画过程中的任意中间状态：

“`css
@keyframes animation-name {
/ 0% 表示动画的开始 /
0% {
/ CSS 属性 /
}

/ 50% 表示动画进行到一半时的状态 /
50% {
/ CSS 属性 /
}

/ 100% 表示动画的结束 /
100% {
/ CSS 属性 /
}
}
“`

• animation-name 是你给这个动画规则起的名字，你可以随意命名，但要具有描述性。
• from 等同于 0%，to 等同于 100%。
• 你可以定义任意数量的百分比中间帧（比如 25%, 75% 等），来创建更复杂的动画过程。
• 在每个帧（from, to, 或百分比）内部，你可以指定一个或多个 CSS 属性及其对应的值。浏览器会自动计算这些属性在不同帧之间的过渡值，从而产生平滑的动画效果。

一个简单的例子：让一个元素从完全透明变为完全不透明（淡入效果）。

css
@keyframes fadeIn {
0% {
opacity: 0; /* 动画开始时完全透明 */
}
100% {
opacity: 1; /* 动画结束时完全不透明 */
}
}

这个 @keyframes 规则只定义了动画的“内容”，它本身不会执行。要让这个动画在页面上生效，你需要将其应用到具体的 HTML 元素上。

将 @keyframes 应用到元素：animation 属性

定义好 @keyframes 规则后，你需要使用一系列 animation- 前缀的 CSS 属性，将定义的动画应用到你想进行动画处理的 HTML 元素上。这些属性可以控制动画的名称、持续时间、速度曲线、循环次数等等。

主要的 animation- 属性包括：

1. animation-name:

   • 作用： 指定要应用到元素的 @keyframes 规则的名称。
   • 值： 之前在 @keyframes 规则中定义的动画名称。
   • 示例： animation-name: fadeIn;

2. animation-duration:

   • 作用： 指定动画完成一个周期所需的时间。
   • 值： 一个时间值，单位可以是秒 (s) 或毫秒 (ms)。
   • 示例： animation-duration: 2s; （动画持续 2 秒）或 animation-duration: 500ms; （动画持续 500 毫秒）。这个值不能是负数。

3. animation-timing-function:

   • 作用： 定义动画在每一帧之间如何进行加速和减速，即动画的速度曲线。
   • 值：
     • ease (默认值): 动画开始和结束时慢，中间快。
     • linear: 动画从头到尾速度相同。
     • ease-in: 动画慢速开始。
     • ease-out: 动画慢速结束。
     • ease-in-out: 动画慢速开始和结束，中间加速。
     • step-start: 动画立即跳转到结束状态。
     • step-end: 动画在持续时间结束时立即跳转到结束状态。
     • steps(n, direction): 将动画分割成 n 个相等的步骤。direction 可以是 start 或 end（默认为 end）。
     • cubic-bezier(x1, y1, x2, y2): 定义自定义的贝塞尔曲线速度。这是一个非常强大的工具，可以创建独特的加速/减速效果。（网上有很多贝塞尔曲线生成器工具）。
   • 示例： animation-timing-function: ease-in-out;

4. animation-delay:

   • 作用： 指定动画在加载后或上一个动画周期结束后，等待多久才开始执行。
   • 值： 一个时间值 (s 或 ms)。可以是负数，负值表示动画会立即开始，但跳过动画过程中的一部分，仿佛动画已经执行了一段时间。
   • 示例： animation-delay: 1s; （动画延迟 1 秒开始）。

5. animation-iteration-count:

   • 作用： 指定动画应该播放多少次。
   • 值：
     • 一个非负整数：指定动画播放的具体次数。
     • infinite: 动画无限次循环播放。
   • 示例： animation-iteration-count: 3; （播放 3 次）或 animation-iteration-count: infinite; （无限循环）。

6. animation-direction:

   • 作用： 指定动画在循环播放时，是向前播放、向后播放还是交替播放。
   • 值：
     • normal (默认值): 每次循环都向前播放（从 0% 到 100%）。
     • reverse: 每次循环都向后播放（从 100% 到 0%）。
     • alternate: 奇数次循环向前播放，偶数次循环向后播放。
     • alternate-reverse: 奇数次循环向后播放，偶数次循环向前播放。
   • 示例： animation-direction: alternate;

7. animation-fill-mode:

   • 作用： 指定动画在执行之前（animation-delay 期间）和执行之后（动画结束后）元素的状态。
   • 值：
     • none (默认值): 动画执行前元素保持原样，动画结束后元素返回其初始状态。
     • forwards: 动画结束后，元素将保持其在动画最后一帧（取决于 animation-direction）时的状态。
     • backwards: 动画执行前，元素将立即应用动画第一帧（取决于 animation-direction）的样式，并在 animation-delay 期间保持这个状态。
     • both: 同时应用 forwards 和 backwards 的效果。
   • 示例： animation-fill-mode: forwards;

8. animation-play-state:

   • 作用： 控制动画是正在运行还是暂停。通常通过 JavaScript 或伪类（如 :hover）来改变此属性。
   • 值： running (默认值) 或 paused。
   • 示例： animation-play-state: paused;

animation 缩写属性

为了方便，CSS 提供了 animation 缩写属性，可以将以上大部分属性写在一行：

css
/* 顺序通常是：name | duration | timing-function | delay | iteration-count | direction | fill-mode | play-state */
animation: name duration timing-function delay iteration-count direction fill-mode play-state;

注意： animation-play-state 不包含在缩写中。

例如，上面的淡入动画可以这样应用：

css
.my-element {
animation-name: fadeIn;
animation-duration: 2s;
animation-timing-function: ease-out;
animation-delay: 0.5s;
animation-iteration-count: 1; /* 或者 simply omit as 1 is default iteration for forward direction */
animation-fill-mode: forwards; /* 动画结束后保持不透明 */
}
/* 或者使用缩写 */
.my-element {
animation: fadeIn 2s ease-out 0.5s 1 forwards;
}
1 是 iteration-count 的默认值，normal 是 direction 的默认值，none 是 fill-mode 的默认值。如果它们取默认值，可以省略。不过对于初学者，建议先把常用的几个写上。

一个更简洁的缩写，只包含名称和持续时间：

css
.my-element {
animation: fadeIn 2s; /* 只指定名称和持续时间，其他使用默认值 */
}

第一个动画实例：淡入效果

让我们结合 @keyframes 规则和 animation 属性，创建一个完整的淡入效果。

HTML:

“`html

“`

CSS (style.css):

“`css
.fade-in-box {
width: 200px;
height: 100px;
background-color: lightblue;
margin: 50px auto;
text-align: center;
line-height: 100px;
font-size: 1.2em;

/ 初始状态（动画前隐藏，可选，但 fill-mode: backwards 更推荐） /
/ opacity: 0; /

/ 应用动画 /
animation-name: fadeIn;
animation-duration: 3s; / 动画持续 3 秒 /
animation-timing-function: ease-in; / 慢速开始 /
animation-delay: 1s; / 延迟 1 秒开始 /
animation-iteration-count: 1; / 播放一次 /
animation-direction: normal; / 正常方向 /
animation-fill-mode: forwards; / 动画结束后保持最终状态 /
}

/ 定义 @keyframes 规则 /
@keyframes fadeIn {
0% {
opacity: 0; / 开始时完全透明 /
}
100% {
opacity: 1; / 结束时完全不透明 /
}
}
“`

将这两个文件放在同一个文件夹中，然后在浏览器中打开 HTML 文件。你会看到蓝色方框在页面加载 1 秒后开始出现，并花了 3 秒时间逐渐变得完全可见。

解释：

• 我们创建了一个名为 fadeIn 的 @keyframes 规则，定义了 opacity 从 0 到 1 的变化。
• .fade-in-box 元素应用了这个动画。
• animation-duration: 3s; 使淡入过程持续 3 秒。
• animation-delay: 1s; 使动画在页面加载 1 秒后才开始。
• animation-fill-mode: forwards; 非常重要，它确保了动画结束后，元素的 opacity 保持在 1，而不是恢复到动画前的状态（如果之前没有设置 opacity: 0;，默认就是 1）。如果元素默认是可见的，并且你想让它在动画前隐藏，那么 animation-fill-mode: backwards; 配合 @keyframes 的 0% 状态 (opacity: 0) 是更好的选择，它会在延迟期间就应用 0% 的样式。或者直接在元素上设置 opacity: 0; 并在 @keyframes 中从 0% 开始动画。

第二个动画实例：简单的移动和变色

这个例子将展示如何同时动画多个属性，以及如何使用百分比帧。

HTML: (与上一个例子类似，只需修改 div 的 class)

“`html

“`

CSS (style.css):

“`css
.move-color-box {
width: 100px;
height: 100px;
background-color: red;
margin: 50px 0; / 从页面左侧开始 /
text-align: center;
line-height: 100px;
color: white;

/ 应用动画 /
animation-name: moveAndChange;
animation-duration: 4s; / 动画持续 4 秒 /
animation-timing-function: ease-in-out; / 慢速开始和结束 /
animation-iteration-count: infinite; / 无限循环 /
animation-direction: alternate; / 交替方向播放 /
}

/ 定义 @keyframes 规则 /
@keyframes moveAndChange {
0% {
transform: translateX(0); / 初始位置，向右移动 0px /
background-color: red; / 初始颜色 /
}
50% {
transform: translateX(300px) rotate(180deg); / 移动到右边 300px，旋转 180 度 /
background-color: blue; / 中间颜色 /
}
100% {
transform: translateX(0) rotate(0deg); / 回到初始位置，旋转回 0 度 /
background-color: red; / 结束颜色 /
}
}
“`

打开这个 HTML 文件，你会看到红色方框在页面上左右移动，同时颜色在红蓝之间变化，并在移动到右边时旋转。因为 animation-iteration-count 设置为 infinite，并且 animation-direction 设置为 alternate，所以动画会无限次地、来回地播放。

解释：

• @keyframes moveAndChange 定义了三个状态：0%、50%、100%。
• 在 0% 和 100% 状态，元素在原位 (translateX(0)) 且为红色。
• 在 50% 状态，元素向右移动了 300px (translateX(300px))，同时旋转了 180 度 (rotate(180deg))，并变为蓝色。
• 浏览器会自动计算这些属性在不同百分比之间的过渡值。
• animation-iteration-count: infinite; 使动画持续播放。
• animation-direction: alternate; 使动画在完成一个周期（0% -> 50% -> 100%）后，下一个周期反向播放（100% -> 50% -> 0%），实现左右来回移动的效果。
• 这里使用了 transform 属性（translateX 和 rotate）。transform 属性非常适合用于动画，因为它通常可以触发硬件加速，性能很好。

进阶技巧与考虑

掌握了基本概念和属性后，我们可以探讨一些更高级的技巧和实际应用中的考虑。

1. 动画多个元素： 你可以给不同的元素应用相同的 @keyframes 规则，或者应用不同的规则，来实现复杂的场景动画。通过调整 animation-delay，可以实现动画的序列播放。

2. 使用伪类和伪元素动画： CSS Animation 可以应用于元素的伪类（如 :hover, :focus, :active）和伪元素（如 ::before, ::after）。这常用于创建交互式的悬停效果或装饰性动画。
   “`css
   .hover-scale-box {
   width: 100px;
   height: 100px;
   background-color: green;
   margin: 50px auto;
   transition: transform 0.3s ease; / 注意：悬停效果通常用 transition 更简单 /
   }

   .hover-scale-box:hover {
   transform: scale(1.1); / 鼠标悬停时放大 /
   }

   / 如果悬停效果更复杂，需要用 animation /
   @keyframes pulse {
   0% { transform: scale(1); }
   50% { transform: scale(1.1); }
   100% { transform: scale(1); }
   }
   .pulse-box:hover {
   animation: pulse 1s infinite;
   }
   对于简单的状态变化，`transition` 通常更合适且性能更好。对于需要多步、循环或更复杂时间控制的动画，`animation` 是首选。
动画伪元素例子：css
   .element-with-pseudo::before {
   content: ”;
   display: block;
   width: 10px;
   height: 10px;
   background-color: yellow;
   position: absolute;
   top: 0;
   left: 0;
   animation: moveAround 3s infinite alternate;
   }

   @keyframes moveAround {
   0% { transform: translate(0, 0); }
   50% { transform: translate(50px, 50px); }
   100% { transform: translate(0, 0); }
   }
   “`

3. 性能考虑：

   • 优先动画 opacity 和 transform： 这两个属性的变化通常不会引起页面布局（Layout）或绘制（Paint）的改变，浏览器可以直接通过合成（Compositing）来处理，利用 GPU 进行硬件加速，性能最好。
   • 避免动画会触发布局或绘制的属性： 尽量避免直接动画 width, height, margin, padding, top, left (当 position 是 relative 或 absolute 时会影响布局) 等属性。如果必须动画这些属性，可能会导致性能问题，尤其是在动画大量元素或在低性能设备上。可以使用 transform: scale() 代替 width/height 的缩放，使用 transform: translate() 代替 top/left/margin 的位置改变。
   • 管理动画数量： 同一时间运行大量复杂的 CSS 动画可能会消耗较多资源。

4. 无障碍性 (Accessibility)：

   • 有些用户可能对动画敏感，或者觉得过多的动画分散注意力甚至引起不适。CSS 提供了媒体查询 @media (prefers-reduced-motion: reduce) 来检测用户是否在操作系统层面设置了“减少动态效果”的偏好。
   • 对于设置了此偏好的用户，你应该考虑禁用或减少页面上的动画。
     “`css
     / 默认的动画 /
     .animated-element {
     animation: myAnimation 5s infinite;
     }

   / 用户偏好减少动态效果时 /
   @media (prefers-reduced-motion: reduce) {
   .animated-element {
   animation: none; / 禁用动画 /
   / 或者改为更简单的、非连续的动画 /
   }
   }
   “`

5. 浏览器兼容性： 现代浏览器对 CSS Animation 的支持已经非常好。在过去，需要添加浏览器前缀（如 -webkit-, -moz-, -o-）来确保兼容性。现在，大多数情况下不再需要。但如果目标用户包含使用非常老旧的浏览器的群体，你可能需要考虑使用 Autoprefixer 等工具来自动添加前缀。

6. 使用 steps() 定时函数： steps() 函数可以将动画过程分割成离散的步骤，而不是平滑过渡。这在创建逐帧动画（比如模拟旧式电影或精灵图动画）时非常有用。
   “`css
   / 精灵图动画示例 /
   .sprite {
   width: 100px; / 单帧宽度 /
   height: 100px; / 单帧高度 /
   background-image: url(‘sprite.png’); / 包含多帧的图片 /
   animation: playSprite 1s steps(10) infinite; / 1秒播放完10帧，无限循环 /
   }

   @keyframes playSprite {
   from { background-position: 0 0; } / 精灵图的起始位置 /
   to { background-position: -1000px 0; } / 精灵图的结束位置 (10帧 * 100px/帧 = 1000px) /
   }
   “`

7. 使用 cubic-bezier() 定时函数： 如果内置的定时函数不能满足你的需求，cubic-bezier() 允许你定义一个自定义的动画加速曲线。它需要四个参数 (x1, y1, x2, y2) 来定义一个三次贝塞尔曲线。有很多在线工具可以帮助你可视化和生成贝塞尔曲线值，例如 cubic-bezier.com。
   css
.custom-timing-box {
animation: moveX 2s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite alternate; /* 自定义一个弹跳效果的曲线 */
}
@keyframes moveX {
to { transform: translateX(200px); }
}

8. 同时应用多个动画： 你可以通过在 animation 或各个 animation-* 属性中列出多个值（用逗号 , 分隔）来为一个元素应用多个动画。
   css
.multi-animation-box {
animation-name: slideIn, rotateInf;
animation-duration: 1s, 5s;
animation-timing-function: ease-out, linear;
animation-delay: 0s, 1s; /* slideIn 立即开始，rotateInf 延迟 1 秒开始 */
animation-iteration-count: 1, infinite;
animation-fill-mode: forwards, none;
}
@keyframes slideIn {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
@keyframes rotateInf {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
   注意，当应用于同一个属性（如 transform）时，后面的动画可能会覆盖前面的，或者需要结合使用（如 transform: translateX(...) rotate(...)）。同时动画多个属性是更常见和推荐的做法，如第一个例子中同时动画 translateX 和 rotate。这里同时应用多个动画主要用于独立动画不同的方面或者序列播放不同的动画效果。

CSS Transitions vs. CSS Animations

在学习 CSS Animation 时，你可能会遇到 CSS Transition。它们都用于创建网页上的动态效果，但用途略有不同：

• Transitions (过渡): 用于在两个状态之间平滑地过渡 CSS 属性值。通常由用户交互（如 :hover, :focus）或通过 JavaScript 改变元素的类或样式来触发。它只需要定义开始和结束状态。
• Animations (动画): 用于创建更复杂的多步动画。通过 @keyframes 规则，可以定义动画过程中任意数量的中间状态。它可以自动播放、循环播放、反向播放等，不一定需要用户交互触发。

简单来说，Transitions 适合简单的状态变化，Animations 适合更复杂、可控性更强的动画序列。对于新手，先掌握 Transitions 再学习 Animations 会更容易理解。

调试 CSS Animation

浏览器开发者工具是调试 CSS Animation 的强大帮手。

• 在 Elements (元素) 面板中选中一个正在动画的元素。
• 在 Styles (样式) 或 Computed (计算) 面板中，你可以看到应用的 animation 属性和 @keyframes 规则。
• 某些浏览器（尤其是 Chrome 和 Firefox）的开发者工具还有一个专门的 Animations 面板。打开这个面板，你可以看到页面上当前正在运行的动画列表，可以检查动画属性、播放/暂停动画、调整播放速度，甚至拖动时间线来查看动画在不同时间点的状态，这对于调试复杂的动画非常有用。

总结与下一步

恭喜你，现在你已经对 CSS Animation 有了全面的了解！我们学习了：

• @keyframes 规则如何定义动画的步骤和状态。
• animation- 系列属性如何控制动画的行为（名称、持续时间、速度、循环等）。
• 如何将 @keyframes 应用到 HTML 元素上。
• 通过实例学习了淡入、移动和变色等基本动画。
• 探讨了高级技巧，如动画 transform、使用 steps() 和 cubic-bezier()。
• 了解了性能、无障碍性和调试动画的关键考虑。
• 简要区分了 Transitions 和 Animations。

从零开始学习，最重要的是动手实践。现在你可以尝试：

1. 修改本文中的例子，改变属性值，看看效果如何。
2. 尝试组合不同的动画属性，创造新的效果。
3. 尝试为你的个人项目添加一些简单的动画，比如按钮的悬停效果、元素的出现动画等。
4. 查阅 MDN Web Docs (Mozilla Developer Network) 上关于 CSS Animations 的更详细文档，那里有更全面的属性说明和更多例子。
5. 浏览一些优秀的网页设计，分析它们使用了哪些动画效果，尝试模仿实现。

CSS Animation 是一个既有趣又实用的技能。通过不断地实践和探索，你一定能掌握它，为你的网页增添更多生机与活力！祝你学习愉快！