CSS transition 和 animation 的区别？
transition（过渡）
状态变化时平滑过渡，需要触发条件（如 :hover、class 切换）。
.btn {
background: blue;
transition: background 0.3s ease, transform 0.3s ease;
}
.btn:hover {
background: red;
transform: scale(1.05);
}animation（动画）
自动执行，无需触发，可设循环次数、方向等。
.loading {
animation: spin 1s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}对比
| 特性 | transition | animation |
|---|---|---|
| 触发方式 | 需要状态变化 | 自动执行 |
| 关键帧 | 只有起止两帧 | 支持 @keyframes 多帧 |
| 循环 | ❌ | ✅ |
| 暂停 | ❌ | ✅ animation-play-state |
| 方向 | ❌ | ✅ alternate |
| 适用 | 交互反馈 | 加载动画、持续动画 |
transition 常用属性
transition: property duration timing-function delay;
/* 例 */
transition: all 0.3s ease 0.1s;
transition: width 0.3s, height 0.5s ease-in;
/* timing-function */
ease /* 先快后慢 */
linear /* 匀速 */
ease-in /* 先慢后快 */
ease-out /* 先快后慢 */
cubic-bezier(0.4, 0, 0.2, 1) /* 自定义贝塞尔曲线 */animation 常用属性
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
/* 例 */
animation: fadeIn 0.5s ease 0s 1 normal forwards;
@keyframes fadeIn {
0% { opacity: 0; transform: translateY(20px); }
100% { opacity: 1; transform: translateY(0); }
}选择建议
- 悬停/点击反馈 → transition
- 加载/持续动画 → animation
- 复杂多帧动画 → animation + @keyframes