transition-delay 必须与 transition-property、transition-duration 配合使用才生效；单独声明无效，常见失效原因包括属性声明不完整、JS 同步修改导致渲染合并、多属性延迟顺序错位，负值表示跳帧而非倒播。
支持，transition-delay 就是专门干这个的——但它必须和 transition-property、transition-duration 一起用才生效，单独写 transition-delay: 0.2s 没反应。
为什么写了 transition-delay 却没延迟效果
最常见原因是过渡声明不完整：
-
transition-delay只对「已声明进transition-property的属性」起作用；如果只写了transition-delay: 0.3s，但没指定哪个属性动、动多久，浏览器直接忽略 - 用了
transition: all 0.3s却以为transition-delay: 0.3s会生效——错。all会让所有可动画属性都参与，但transition-delay单独声明时不会自动绑定到all上 - JS 同步修改样式后立刻触发状态变化（比如先
el.classList.add('hover')再el.style.opacity = '1'），浏览器可能合并渲染，跳过延迟阶段
如何正确设置多个属性的不同延迟
关键在于顺序严格对应，不能靠猜：
- 写法一（推荐）：用多值列表，
transition-property、transition-duration、transition-delay三者一一对应transition-property: background-color, transform;transition-duration: 0.3s, 0.4s;transition-delay: 0s, 0.15s; - 写法二（简写）：直接写成
transition: background-color 0.3s, transform 0.4s 0.15s;—— 注意第二个属性后面跟的是duration delay，不是delay duration - 错误示范：
transition: transform 0.4s, background-color 0.3s 0.15s;看似没问题，但如果transition-property里顺序是background-color, transform，那0.15s实际会套到transform上，造成错位
transition-delay 负值怎么用才不翻车
负值不是倒播，而是“跳帧”——它让动画从中间某一时刻的状态开始继续执行：
立即学习“前端免费学习笔记（深入）”；
-
transition: opacity 1s; transition-delay: -0.4s;表示：状态一变，opacity 立即跳到「已执行 0.4 秒后」该有的值（比如从 0→1 的线性过渡中，直接设为 0.4），再花剩下 0.6 秒走到 1 - 负值只有在
transition-duration明确且大于其绝对值时才有意义；若transition-delay: -2s但transition-duration: 1s，那整个动画就直接跳到终点，不执行 - 别用负值来“修复延迟失效”——它解决不了声明缺失或 JS 渲染合并的问题，反而会让行为更难预测
真正容易被忽略的点是：hover 和 JS 触发时，transition-delay 的行为逻辑其实不同。hover 是伪类切换，浏览器能清晰捕捉“进入/离开”两个时间点；而 JS 改 class 或 style 是同步操作，延迟是否生效高度依赖是否触发了强制重排。所以，涉及 JS 控制的过渡，优先把所有 transition 声明写死在 CSS 里，只用 class 切换驱动，别混用内联 style。
