transition更适合“从a到b”的一次性状态切换，如按钮悬停变色、菜单展开、卡片浮起；animation必须用于自动播放、多阶段、循环或需暂停/反向控制的动画。
transition 更适合初级项目——只要交互是“从 A 到 B”的一次性状态切换，比如按钮悬停变色、菜单展开、卡片浮起，它写起来快、调试简单、性能稳，且几乎不会出错。
用 transition 的典型场景：hover、focus、class 切换时的平滑变化
它不依赖关键帧，只靠“有明确起止值 + 触发源”就能动起来。常见误判是写了 transition: all 0.3s 却没效果，原因通常是：
- 没写触发态（比如只定义了
.btn，却漏了.btn:hover或 JS 中没加 class） - 过渡属性不可插值（如
display、height: auto、font-size混用em和px） - 起始值或结束值未显式声明（例如
transform起始态没写transform: none，浏览器无法补间）
推荐写法是按需指定属性：transition: background-color 0.25s ease, transform 0.2s ease-out，避免 all 带来意外过渡（比如不小心过渡了 box-shadow 或 border）。
什么情况下必须上 @keyframes + animation？
当你需要：
- 自动播放（不依赖用户交互），比如加载 spinner、打字效果
- 多阶段运动（放大 → 旋转 → 淡出），或中间停顿（50% 关键帧）
- 循环（
infinite）、反向（alternate）、控制播放状态（animation-play-state）
注意：如果动画结束后要保持末帧样式，必须加 animation-fill-mode: forwards；否则一停就回退到初始值，常导致交互断裂。另外，老版 Safari 需要 -webkit- 前缀，IE10+ 才支持标准语法。
transition 和 animation 能不能一起用？
可以，而且很常见——但得清楚谁覆盖谁：
- 同一属性（如
transform）同时被transition和animation控制时，animation的 keyframes 会完全接管，transition对该属性失效 - 推荐分工：用
animation做“自主循环部分”（如图标自转），用transition处理“用户触发衔接”（如整个容器 hover 时加阴影或提升z-index） - 别在
@keyframes里改width、top、margin——这些触发布局重排（reflow），卡顿明显；优先用transform和opacity，它们走合成层，GPU 加速友好
forwards、是否用了非可动画属性，比调贝塞尔曲线重要得多。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
