在网页开发中，CSS 动画是提升用户体验的重要手段之一。其中，transition 和 animation 是实现动画效果的两个核心属性。虽然它们都能实现视觉上的过渡和动态变化，但它们的使用方式、触发机制和适用场景却大不相同。
本文将深入解析 transition 和 animation 的区别，并通过示例帮助你更好地理解和应用这两种动画方式。
📌 一、基本概念对比
| 特性 | transition | animation |
|---|---|---|
| 动画类型 | 过渡动画（状态之间平滑切换） | 关键帧动画（自定义多帧动画） |
| 是否需要触发 | ✅ 需要事件触发（如 hover、focus） | ❌ 不需要触发，自动播放 |
| 是否支持多关键帧 | ❌ 只有开始和结束两个状态 | ✅ 支持多个关键帧（通过 @keyframes） |
| 控制精细度 | 简单，只能控制两个状态之间的过渡 | 复杂，可精确控制每一帧 |
| 是否可循环播放 | ❌ 默认只执行一次 | ✅ 可设置无限循环 |
| 是否支持延迟播放 | ✅ 支持 | ✅ 支持 |
🧩 二、逐项解析
1. transition —— 状态之间的平滑过渡
✅ 特点：
- 实现的是两个状态之间的渐变过程；
- 必须通过某个事件触发（如鼠标悬停、点击等）；
- 不能定义中间状态，只有起始和结束两个关键帧；
- 常用于按钮悬停、元素显示/隐藏等简单交互；
📌 示例：
.box {
width: 100px;
height: 100px;
background-color: red;
transition: width 0.5s ease, background-color 0.5s ease;
}
.box:hover {
width: 200px;
background-color: blue;
}
当鼠标悬停在 .box 上时，宽度和背景色会以 0.5 秒的动画过渡到新值。
⚙️ 属性说明：
transition-property：指定要过渡的 CSS 属性；transition-duration：动画持续时间；transition-timing-function：动画速度曲线（如ease,linear）；transition-delay：延迟多久后开始动画；
2. animation —— 自定义关键帧动画
✅ 特点：
- 使用
@keyframes定义多个关键帧； - 动画可以自动播放，不需要用户交互；
- 可以设置动画播放次数（包括无限循环）；
- 更适合复杂动画，如加载动画、进度条、弹窗动效等；
📌 示例：
@keyframes slideIn {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.box {
animation: slideIn 1s ease-in-out infinite alternate;
}
.box 元素会在页面加载后自动执行一个从左向右滑入的动画，并且无限循环，每次反向播放。
⚙️ 属性说明：
animation-name：指定@keyframes名称；animation-duration：动画持续时间；animation-timing-function：动画速度函数；animation-delay：动画延迟播放时间；animation-iteration-count：播放次数（如infinite表示无限）；animation-direction：播放方向（normal, reverse, alternate）；animation-fill-mode：动画执行前后如何应用样式（如forwards、backwards）；animation-play-state：控制动画暂停或继续（可用于性能优化）；
🧠 三、何时使用 transition？何时使用 animation？
| 场景描述 | 推荐使用 |
|---|---|
| 按钮 hover 效果 | ✅ transition |
| 输入框 focus 边框颜色变化 | ✅ transition |
| 图片懒加载淡入效果 | ✅ transition |
| 页面加载动画、欢迎页动效 | ✅ animation |
| 弹窗、抽屉、进度条动画 | ✅ animation |
| 多阶段动画（如 loading 转圈动画） | ✅ animation |
💡 四、性能与兼容性对比
| 对比维度 | transition | animation |
|---|---|---|
| 性能表现 | ✅ 更轻量，适用于简单交互动画 | ⚠️ 复杂动画可能影响性能 |
| 兼容性 | ✅ 广泛支持现代浏览器 | ✅ 支持主流浏览器，旧版需加前缀 |
| 可维护性 | ✅ 简洁易懂 | ⚠️ 关键帧较多时代码较复杂 |
| 是否可中断 | ✅ 可通过取消触发条件停止动画 | ✅ 可通过 JavaScript 控制动效 |
| 是否可复用 | ⚠️ 依赖特定状态变化 | ✅ 可封装为通用动画模块 |
📌 五、总结对比表
| 特征 | transition | animation |
|---|---|---|
| 触发方式 | 需要事件触发 | 自动播放 |
| 是否支持多关键帧 | ❌ | ✅ |
| 是否可循环 | ❌ | ✅ |
| 动画控制粒度 | 简单，仅两个状态 | 细致，可定义任意帧 |
| 动画是否可中断 | ✅ | ✅ |
| 适用场景 | 简单状态切换（hover、focus） | 复杂动画、加载动效、自定义动效 |
