transition-delay 和 transition-duration 严格按“延迟→持续”分阶段执行：先等待 delay 时长，再用 duration 完成动画，总耗时为二者之和；负 delay 表示跳过动画前段直接从中间帧开始；简写中若指定 timing-function 却遗漏 delay，浏览器会误解析导致失效。
transition-delay 和 transition-duration 的执行顺序是什么
它们不是并列生效的，而是严格按“延迟→持续”分阶段执行：transition-delay 决定动画何时开始，transition-duration 决定从开始到结束花了多久。中间没有重叠或抵消关系，延迟完立刻进入持续阶段。
常见误解是认为设置 transition-delay: 1s 和 transition-duration: 0.5s 会让整个过渡“占满1.5秒”，其实总耗时就是 1s + 0.5s = 1.5s，但前1秒什么视觉变化都没有——这是关键。
如何为不同属性设置不同的 delay 和 duration
CSS 支持对单个属性单独配置过渡行为，用逗号分隔多组值即可。顺序必须严格对应：属性名、duration、timing-function、delay。
- 写法示例：
transition: background-color 0.3s ease 0.2s, transform 0.6s cubic-bezier(0.2, 0.8, 0.4, 1) 0s; - 第一组控制
background-color：0.3秒完成，0.2秒后才启动 - 第二组控制
transform：0.6秒完成，立即启动（delay 为 0） - 如果只写两个时间值（如
transition: all 0.3s 0.2s），则所有可过渡属性共用同一组 duration 和 delay
transition-delay 为负值会发生什么
负值是合法的，表示“跳过前 N 秒的动画过程”，直接从动画中间某一帧开始播放。比如 transition-duration: 1s 配 transition-delay: -0.3s，相当于从第 0.3 秒的画面切入，剩余 0.7 秒播完。
立即学习“前端免费学习笔记（深入）”；
这在快速悬停反馈或衔接动画时有用，但要注意：
- 浏览器不会回溯初始状态，若元素还没到达起始值，负 delay 可能导致突兀跳变
- 和
transition-timing-function联用时，负 delay 实际跳转的位置取决于缓动函数曲线，不易精确预判 - 不建议在需要可预测交互动画的场景中滥用负值
transition 简写中遗漏 delay 会导致什么问题
简写语法 transition: property duration timing-function delay 中，delay 是可选的，但如果写了 timing-function 却没写 delay，浏览器会把第三个值误认为 delay，而把本该是 timing-function 的值当作无效丢弃。
例如：transition: opacity 0.4s ease; ✅ 正确（ease 是 timing-function，delay 默认为 0）transition: opacity 0.4s ease-in-out 0.1s; ✅ 明确指定全部四项transition: opacity 0.4s ease-in-out; ❌ 错误：浏览器把 ease-in-out 当作 delay，实际无缓动效果，且 duration 变成 0.4s ease-in-out 这个非法值，整条声明可能被忽略
稳妥做法是：只要用了 timing-function，就显式写出 delay（哪怕为 0s）；或者干脆拆成独立属性写，避免歧义。
