负的 transition-delay 会让动画从中间帧开始播放而非倒放，如 duration: 1s 配 delay: -0.3s 即跳过前300ms从30%进度启动；延迟绝对值≥持续时间则动画立即完成。
transition-delay 为负值时会发生什么
负的 transition-delay 不会让动画“倒放”，而是让过渡从中间某一帧开始播放。比如 transition-duration: 1s 配合 transition-delay: -0.3s，相当于跳过前 300ms，直接从 30% 进度处启动动画。
- 适用于需要“切入式”动效的场景，比如菜单展开时希望图标先动、文字后跟，但整体又不希望等太久
- 浏览器不会报错，但若延迟绝对值 ≥ 持续时间（如
delay: -2s+duration: 1s），动画会立即完成，视觉上无变化 - 慎用于可访问性敏感组件（如焦点切换、表单验证提示），负延迟可能造成状态与视觉不同步
多个 transition-Property 怎么配不同的 delay 和 duration
css 允许对同一元素的不同属性分别设置过渡参数，用逗号分隔即可，顺序必须严格对应：
transition-property: opacity, transform, background-color; transition-duration: 0.2s, 0.35s, 0.5s; transition-delay: 0s, 0.1s, 0.2s;- 三个属性、三个 duration、三个 delay —— 少一个就会截断，多余项被忽略
- 如果只希望某个属性有延迟（如仅
transform延后 0.1s），其他属性不延迟，需显式写0s占位 - 注意：简写
transition无法实现这种精细控制，必须拆成独立属性声明
transition-delay 在 hover 离开时失效的常见原因
很多人发现鼠标移出后，transition-delay 好像没起作用 —— 实际是它起了，但你没给「离开状态」单独定义过渡规则。
- 默认只写了
div:hover { transition-delay: 0.2s; }？这毫无意义，transition-delay必须和transition-property、transition-duration同时存在才生效，且需写在「初始状态」或「hover 状态」中 - 正确做法：把完整过渡定义放在非 hover 状态（即默认样式），hover 中只改触发值，例如：
div { transition: opacity 0.3s ease 0.1s, transform 0.4s cubic-bezier(0.2,0.8,0.4,1) 0.1s; }div:hover { opacity: 0.8; transform: translateY(-2px); } - 否则，移出时浏览器会回退到无 transition 的原始状态，表现为“突兀消失”
js 动态修改 transition-delay 后动画不触发
直接 JS 设置 element.style.transitionDelay = '0.5s' 通常无效，因为此时 transition-property 或 transition-duration 可能尚未就绪，或旧 transition 正在运行导致覆盖。
立即学习“前端免费学习笔记（深入）”；
- 确保三要素齐全：修改
transitionProperty、transitionDuration、transitionDelay三者同时生效（可用 CSS 自定义属性间接控制） - 更稳妥的方式：用 class 切换代替内联 style 修改，例如
element.classlist.add('delayed')，并在 CSS 中定义.delayed { transition-delay: 0.5s; } - 若需强制重绘触发新过渡，可在修改样式后加一句
void element.offsetWidth（读取 layout 强制刷新队列）
实际项目里最容易被忽略的是：transition-delay 的生效依赖于「属性值确实发生了变化」。哪怕只差 0.001px，只要计算后不同，就能触发；但如果 JS 重复赋同一个值（比如两次都设 opacity: 1），就不会重走过渡流程。