transition-delay 必须与 transition-property 和 transition-duration 同时存在才生效；单独设置无效，且多属性延迟需严格对应数量与顺序，JS 动态修改时须强制重排。

transition-delay 必须和 transition-property、transition-duration 同时存在

单独写 transition-delay: 0.3s 不会触发任何过渡——浏览器根本不会启动过渡流程。它不是独立生效的属性，只是 transition 复合声明中的一部分。

常见错误是只设延迟，却漏掉「变化什么」和「花多久变」这两个前提：

• ❌ transition-delay: 0.5s;（孤立使用，无 transition-property 和 transition-duration）
• ✅ transition: opacity 0.4s ease 0.3s;（顺序必须是 property → duration → timing-function → delay）
• ⚠️ 即使用简写，前三个值也不能省略；想用默认值也得显式写出，比如 all 0.2s ease 0.1s

多属性不同延迟要用逗号分隔或拆成多个声明

如果希望 opacity 延迟 0.1s 开始、transform 延迟 0.4s 开始，不能靠一个 transition-delay 统一控制。

正确做法只有两种，且两组值数量、顺序必须严格对应：

立即学习“前端免费学习笔记（深入）”；

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• ✅ 逗号分隔简写：transition: opacity 0.2s ease 0.1s, transform 0.3s ease 0.4s;
• ✅ 拆开声明：transition-property: opacity, transform; + transition-duration: 0.2s, 0.3s; + transition-timing-function: ease, ease; + transition-delay: 0.1s, 0.4s;
• ⚠️ 如果 transition-delay 少写一个值（比如只写 0.1s），后一个 transform 的延迟会被忽略，直接按 0 延迟执行

JS 动态改 delay 容易跳过动画，必须强制重排

用 JavaScript 直接改 el.style.transitionDelay = '0.3s'，再立刻触发动画（如加 class），新 delay 往往不生效——浏览器还在用旧的 transition 全值。

安全做法是先清空过渡状态，再重设完整值：

• ✅ 先设 el.style.transition = 'none';
• ✅ 立即读取 el.offsetHeight（强制重排，清空上一次过渡缓存）
• ✅ 再设完整 transition：el.style.transition = 'opacity 0.2s ease 0.3s';
• ⚠️ 避免只改 transitionDelay 后立刻修改目标样式（如 el.style.opacity = '1'），此时过渡大概率被跳过

悬停触发延迟显示时别用 display，改用 opacity + visibility

display 属性不可动画化，对 display: none → block 设置 transition-delay 完全无效。

要实现“鼠标移到 A 上，B 延迟 0.2s 后淡入显示”，必须换可过渡的属性：

• ✅ 初始状态：opacity: 0; visibility: hidden;
• ✅ 悬停触发：A:hover + B { opacity: 1; visibility: visible; transition: opacity 0.3s ease 0.2s; }
• ⚠️ 单独用 opacity 不够：0 透明度的元素仍响应鼠标事件，需配 visibility: hidden 或 pointer-events: none 防误触

实际中最容易被忽略的，是「延迟生效的前提条件」——没有明确指定变化的属性和持续时间，transition-delay 就只是个摆设。它不报错，也不警告，只是静静失效。