transition无法实现分阶段动画，仅支持属性从a到b的单次插值；需用@keyframes+animation定义关键帧来真正分阶段控制，如0%→50%→100%不同状态。
transition 本身不支持分阶段动画
直接用 transition 实现“先缩放再变色最后位移”这类分阶段连续效果是不可能的。它只响应属性值变化，从 A 到 B 的单次线性（或缓动）插值，没有关键帧、没有中间停顿、不能反向或循环。
常见错误是试图靠多个 transition 声明叠加来“模拟”阶段：比如写 transition: transform 0.3s ease, background-color 0.3s ease 0.3s，以为能实现“0.3s 后变色”，结果发现鼠标移入瞬间所有属性都开始计算，只是颜色延迟启动——这仍是单次过渡，不是分阶段控制。
用 animation + keyframes 替代 transition 实现分阶段
真正需要分阶段（如：hover 时先 scale(0.9) → scale(1.1) → scale(1)），必须换用 @keyframes 和 animation。transition 是状态切换的“缓冲器”，animation 才是时间轴上的“导演”。
-
animation允许定义 0%、25%、50%、100% 等任意关键帧，每个阶段可设不同属性、不同持续时间、不同缓动函数 - 可设
animation-iteration-count: infinite实现循环，animation-direction: alternate实现来回播放 - 配合
animation-delay可精确控制各阶段起始时机，比transition-delay更灵活
示例：按钮悬停时弹性弹出
button {
animation: popIn 0.6s cubic-bezier(0.2, 0.8, 0.4, 1);
}
@keyframes popIn {
0% { transform: scale(0.9); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
transition 能做的“伪分阶段”仅限延迟触发
如果只是想让多个属性**错开启动时间**（比如 hover 时先动 transform，0.1s 后再变 opacity），transition 仍可用，但本质仍是各自独立的单次过渡，不是真正串联的阶段。
- 写法：
transition: transform 0.3s ease, opacity 0.3s ease 0.1s - 注意：延迟只作用于该属性的起始点，不是整个动画流程的暂停点
- 风险：若某个属性在延迟期间被 JS 修改（比如中途调用
element.style.opacity = '0.5'），会打断当前过渡，重置计时
容易忽略的兼容与性能细节
即使改用 animation，也要小心两个隐形坑：
-
will-change: transform建议加在动画元素上，尤其在 iOS Safari 上，否则可能卡顿或跳帧 - 避免在
@keyframes中动画width/height/left等触发布局重排的属性；优先用transform和opacity - 不要用
transition: all 0.3s搭配复杂交互，意外修改z-index或visibility也会触发过渡，造成不可控视觉干扰
分阶段动效的边界很清晰：只要涉及多步、循环、暂停、反向，就别硬撑 transition —— 它的设计初衷就是“状态切换时的平滑补间”，不是时间轴编排工具。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
