1. 引言：为什么需要 CSS 动画与过渡？
在现代 Web 开发中，流畅的动画与过渡效果是提升用户体验、引导用户注意力、增强界面反馈的关键手段。CSS 提供了两种核心的动态样式能力：过渡（transition）和动画（animation）。它们允许开发者在不依赖 JavaScript 或复杂库的情况下，创建平滑、高性能的视觉变化。
本文将以前端“MSDN”（开发者技术文档）的风格，系统性地介绍 CSStransition属性的工作原理、语法、使用场景，并对比其与@keyframes基础动画的异同，帮助你根据实际需求选择最合适的技术方案。
2. CSS 过渡（transition）详解
2.1 什么是过渡？
CSS 过渡（transition）是一种在 CSS 属性值发生变化时，控制其变化过程（从旧值到新值）的方式。它让变化不是瞬间完成，而是在一个指定的持续时间（duration）内，按照某种时间函数（timing function）平滑地过渡。
过渡通常由用户交互（如:hover、:focus）或 JavaScript 修改样式触发。
2.2 transition 属性语法
transition是一个简写属性，用于同时设置以下四个子属性：
/* 简写语法 */ transition: property duration timing-function delay; /* 示例：所有属性在 0.3 秒内以 ease 方式过渡，无延迟 */ transition: all 0.3s ease; /* 示例：分别指定多个过渡 */ transition: background-color 0.5s ease-out, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.1s;子属性说明
transition-property：指定应用过渡的 CSS 属性名称。值可以是all（所有可过渡属性）、none（无）或具体的属性名（如opacity、transform）。transition-duration：过渡持续的时间。单位可以是s（秒）或ms（毫秒），如0.3s、500ms。必须指定，否则过渡不会发生。transition-timing-function：定义过渡效果的速度曲线。预设值包括：ease（默认）：慢速开始，然后加速，慢速结束。linear：匀速。ease-in：慢速开始。ease-out：慢速结束。ease-in-out：慢速开始和结束。cubic-bezier(n,n,n,n)：自定义贝塞尔曲线。steps(n, start|end)：阶梯函数。
transition-delay：过渡开始前的延迟时间。单位同duration。默认值为0s。
2.3 可过渡的属性
并非所有 CSS 属性都支持过渡。一般来说，具有中间值的属性才支持，例如：
- 颜色类：
color,background-color,border-color - 数值/长度类：
width,height,margin,padding,font-size - 变换类：
transform（性能极佳，推荐优先使用） - 视觉效果类：
opacity,visibility,box-shadow - 布局类：
flex-grow,grid-template-columns（部分浏览器支持）
对于display: none到display: block这类离散属性变化，通常需要结合opacity和visibility或使用@keyframes动画来实现淡入淡出效果。
2.4 实战示例：按钮悬停效果
<!DOCTYPE html> <html lang="en"> <head> <style> .button { padding: 12px 24px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; /* 定义过渡：背景色和变换属性，持续0.3秒，ease-out曲线 */ transition: background-color 0.3s ease-out, transform 0.2s ease-out; } .button:hover { background-color: #0056b3; /* 背景色变化 */ transform: translateY(-2px); /* 轻微上移 */ } .button:active { transform: translateY(0); /* 点击时复位 */ } </style> </head> <body> <button class="button">悬停看我变化</button> </body> </html>3. CSS 基础动画（@keyframes）
3.1 什么是 CSS 动画？
CSS 动画通过@keyframes规则定义一系列关键帧（从 0% 到 100%），然后使用animation属性将动画应用到元素上。与过渡相比，动画不需要触发事件，可以自动播放、循环、反向播放，并且可以定义更复杂的多阶段序列。
3.2 @keyframes 规则与 animation 属性
/* 1. 定义关键帧 */ @keyframes slide-in { 0% { opacity: 0; transform: translateX(-100%); } 100% { opacity: 1; transform: translateX(0); } } /* 2. 应用动画 */ .element { animation: slide-in 1s ease-out 0.5s both; }animation 子属性说明
animation-name：@keyframes动画的名称。animation-duration：动画一个周期的时长。animation-timing-function：速度曲线（同transition-timing-function）。animation-delay：动画开始前的延迟。animation-iteration-count：播放次数。infinite表示无限循环。animation-direction：播放方向（normal,reverse,alternate,alternate-reverse）。animation-fill-mode：动画执行前后如何应用样式（none,forwards,backwards,both）。animation-play-state：控制播放状态（running,paused）。
3.3 实战示例：加载旋转动画
<!DOCTYPE html> <html lang="en"> <head> <style> @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .spinner { width: 40px; height: 40px; border: 4px solid rgba(0, 0, 0, 0.1); border-radius: 50%; border-top-color: #007bff; /* 应用动画：名称spin，时长1秒，线性，无限循环 */ animation: spin 1s linear infinite; } </style> </head> <body> <div class="spinner"></div> </body> </html>4. Transition 与 Animation 的核心区别与选型指南
| 特性 | CSS 过渡（Transition） | CSS 动画（Animation） |
|---|---|---|
| 触发方式 | 需要触发事件（如:hover,:focus, JS 修改样式） | 可自动播放，无需外部触发 |
| 控制粒度 | 控制“从状态 A 到状态 B”的过渡过程 | 可通过@keyframes定义多个中间状态（0%, 25%, 50%, 100%） |
| 循环播放 | 不支持循环（一次性的） | 支持无限循环（infinite） |
| 方向控制 | 通常单向（A→B），反向需再次触发 | 支持反向、交替播放（alternate） |
| 执行前后状态 | 结束后元素样式保持在触发后的最终状态 | 可通过animation-fill-mode控制前后样式 |
| 适用场景 | 简单的交互反馈（悬停、聚焦、显示/隐藏） | 复杂的多阶段动画、加载动画、自动播放的展示动画 |
选型建议
- 使用 Transition：当你需要为样式状态的简单变化添加平滑效果时。例如：按钮悬停颜色变化、模态框淡入淡出、元素位置微调。
- 使用 Animation：当你需要自动播放、循环播放或定义包含多个关键帧的复杂动画序列时。例如：加载旋转图标、页面入场动画、复杂的品牌动效。
5. 性能最佳实践
- 优先使用
transform和opacity：这两个属性可以由合成器线程处理，不会触发重排（reflow）或重绘（repaint），性能最佳。 - 避免过渡/动画会触发重排的属性：如
width、height、margin、padding、top、left等。如果必须使用，考虑用transform: scale()或translate()替代。 - 使用
will-change属性（谨慎）：对即将发生动画的元素添加will-change: transform, opacity;可以提示浏览器提前优化。但不要滥用，以免消耗过多内存。 - 减少同时进行的动画数量：过多的并发动画可能导致帧率下降。
6. 总结
CSS 过渡（transition）与动画（@keyframes+animation）是构建现代 Web 动态界面的两大基石。过渡擅长处理简单的、由事件触发的状态间平滑变化；动画则提供了更强大的时间轴控制，适用于自动播放、循环、多阶段的复杂动效。
在实际开发中，应根据交互逻辑和视觉效果复杂度选择合适的工具。牢记性能优化原则，优先使用transform和opacity，方能创造出既流畅又高效的视觉体验。
