delay与duration按“先等、再动”顺序执行：delay决定动画开始时间，duration决定变化时长；总耗时为二者之和，但仅duration阶段有视觉变化。
duration 和 delay 不是并列参数，而是严格按“先等、再动”的顺序执行：delay 决定动画什么时候开始，duration 决定开始后花多久完成。两者相加才是用户感知的总时间跨度，但视觉变化只发生在 duration 阶段。
理解执行逻辑：延迟完立刻进入动画
设置 transition-delay: 0.8s 和 transition-duration: 0.3s，意味着元素会静止 0.8 秒，然后在接下来的 0.3 秒内完成样式变化——前 0.8 秒没有任何过渡效果，不是“慢启动”，也不是“淡入前奏”，就是完全静止。
- 总耗时 = delay + duration，但只有 duration 段有动画帧变化
- delay 为 0 时，动画随状态变化立即触发
- delay 为负值（如 -0.2s）时，动画跳过前 20% 进度，从中间帧切入，不是倒播
- 若 delay 负值绝对值 ≥ duration（如 delay: -1s, duration: 0.6s），动画直接到达终点，无过程可见
分属性控制节奏：让不同属性错峰启动
多个可动画属性可以拥有各自独立的 delay 和 duration，实现 staggered（交错）动效。关键在于用逗号分隔、严格对齐顺序。
- 写法必须匹配：property、duration、timing-function、delay 四者一一对应
- 例如：transition: opacity 0.2s ease 0s, transform 0.4s cubic-bezier(0.3, 0, 0.2, 1) 0.15s;
- opacity 立即开始、0.2 秒完成；transform 延迟 0.15 秒再启动、0.4 秒完成
- 适合做图标+文字组合动效：图标先缩放，文字后淡入，节奏自然不拥挤
避免常见配合失误
看似微小的写法差异，容易导致 delay 失效或行为异常。
- 简写中若写了 timing-function 却漏掉 delay，浏览器可能把 timing-function 当作 delay 解析（如 transition: all 0.3s ease; → 实际变成 duration=0.3s, delay=ease，无效）
- 混用单位：delay: 0.5s 和 duration: 300ms 虽能运行，但易引发计算偏差和维护困难，建议全项目统一用秒（如 0.3s、0.45s）
- 用 all 时需谨慎：所有可过渡属性共用同一组 delay/duration，无法实现错峰，还可能触发性能敏感属性（如 width/height）重排
辅助调试与验证节奏
光靠肉眼估算 delay 和 duration 的配合效果容易失准，推荐借助工具确认实际行为。
- Chrome / Edge DevTools 中打开 **Animations 面板**（More Tools → Animations），可直观看到每条 transition 的时间轴、当前进度、触发时机
- 悬停时间轴可查看毫秒级数值，拖动可“冻结”任意帧，检查中间状态是否符合预期
- 对负 delay 场景特别有用：能清楚看到动画是否真的从中间帧切入，而非卡顿或跳变
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
