第十章：CSS 动画基础——从过渡到关键帧
动画是现代 Web 体验的灵魂。它不仅能提升视觉吸引力，还能引导用户注意力、提供操作反馈。
本章将系统讲解 CSS 动画的两大支柱：过渡（Transition） 和 动画（Animation），并通过实战技巧教你如何创建流畅、高性能的交互动效。
1. Transition 与 Animation 的核心区别
| 特性 | Transition（过渡） | Animation（动画） |
|---|---|---|
| 触发方式 | 基于状态变化（如 :hover） | 自动播放或通过 animation-play-state 控制 |
| 复杂度 | 简单，仅两个状态（开始 → 结束） | 复杂，支持多阶段关键帧 |
| 控制粒度 | 低 | 高（可定义多个时间点） |
| 循环能力 | 不支持自动循环 | 支持无限循环 |
| 适用场景 | 悬停效果、按钮反馈、简单位移 | 加载动画、复杂序列、路径运动 |
✅ 口诀：
- “状态切换用 Transition”
- “复杂序列用 Animation”
代码对比
css
/* Transition：悬停时颜色渐变 */
.button {
background: blue;
transition: background 0.3s ease;
}
.button:hover {
background: red;
}
/* Animation：无限旋转的加载图标 */
@keyframes spin {
to { transform: rotate(360deg); }
}
.loader {
animation: spin 1s linear infinite;
}2. 关键帧（@keyframes）与动画属性详解
① 定义关键帧
css
@keyframes slide-in {
0% {
transform: translateX(-100%);
opacity: 0;
}
70% {
transform: translateX(10px);
}
100% {
transform: translateX(0);
opacity: 1;
}
}- 可使用
from(0%) 和to(100%) - 支持中间状态（如 50%, 70%）
② 核心动画属性
| 属性 | 作用 | 示例 |
|---|---|---|
animation-name | 引用 @keyframes 名称 | animation-name: slide-in; |
animation-duration | 动画持续时间 | animation-duration: 0.5s; |
animation-timing-function | 缓动函数（速度曲线） | ease, linear, cubic-bezier(0.4, 0, 0.2, 1) |
animation-delay | 延迟开始时间 | animation-delay: 0.2s; |
animation-iteration-count | 循环次数 | infinite, 3 |
animation-direction | 播放方向 | normal, reverse, alternate |
animation-fill-mode | 动画外状态 | forwards（保持最终态） |
简写语法
css
.element {
animation: slide-in 0.5s ease-in-out 0.1s infinite alternate forwards;
/* 顺序：name duration timing-function delay iteration-direction fill-mode */
}3. 如何实现无限循环动画？
css
.spinner {
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}infinite：无限循环- 常用于：加载图标、呼吸灯、背景流动
4. 常见问题与解决方案
问题 1：如何避免动画抖动？
原因：浏览器未提前优化动画图层。
解决方案：
css
.smooth-animation {
will-change: transform, opacity;
/* 或强制硬件加速 */
transform: translateZ(0);
}will-change提示浏览器：“这个元素即将动画”，提前提升为 GPU 图层。- ⚠️ 慎用：仅对真正需要动画的元素使用。
问题 2：如何控制动画的播放顺序？
使用 animation-delay 实现错峰播放：
css
.list-item {
opacity: 0;
animation: fade-in 0.4s ease forwards;
}
/* 第1个延迟 0.1s，第2个 0.2s... */
.list-item:nth-child(1) { animation-delay: 0.1s; }
.list-item:nth-child(2) { animation-delay: 0.2s; }
.list-item:nth-child(3) { animation-delay: 0.3s; }✅ 高级技巧：结合 JavaScript 动态计算
delay。
5. 性能最佳实践
- 优先使用
transform和opacity：仅触发合成，不重排重绘 - 避免动画
left/top/width/height：会触发昂贵的重排 - 减少
@keyframes复杂度：过多关键帧增加计算负担 - 使用
forwards保持最终状态：避免动画结束后突然跳回
结语：动画是设计的语言
CSS 动画让静态页面“活”起来。
掌握 Transition 和 Animation 的区别，善用 @keyframes 和 animation-delay，你就能创造出既美观又流畅的用户体验。
记住：好的动画是隐形的——它引导用户，但从不打扰用户。
下一章，我们将进入“响应式设计进阶：容器查询（Container Queries）与视口单位”。