transition-delay单独使用无效，必须与transition-property和transition-duration同时声明才生效；常见错误包括仅在:hover中设置、被简写覆盖、多值顺序错位、js动态设置时未同步三者，以及负延迟误用。
transition-delay单独写根本不会生效
写了transition-delay: 0.3s但没反应？不是语法错，是它压根不 standalone 工作。这个属性必须和transition-property、transition-duration同时存在才被浏览器识别。常见错误包括：
- 只在:hover里写
transition-delay，但默认状态没声明transition-property和transition-duration - 用
transition: all 0.3s，再单独加transition-delay: 0.2s——后者会被忽略，因为简写已覆盖全部过渡定义 - JS动态设置
element.style.transitionDelay = '0.5s'，但没同步设transitionProperty和transitionDuration，三者缺一，浏览器直接跳过
多个属性配不同delay时顺序容易错位
想让transform延迟0.15s、opacity立即动，必须严格按顺序一一对应：
transition-property: opacity, transform;transition-duration: 0.2s, 0.4s;transition-delay: 0s, 0.15s;
如果把transition-property写成transform, opacity，但transition-delay还是0s, 0.15s，那transform反而没延迟。简写transition无法实现这种分控，必须拆开写。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 多值声明中，多余项被忽略，少一项就截断——比如写了3个
transition-property但只配2个transition-delay，第三个delay默认为0s - hover离开时动画突兀，往往是因为只在:hover里定义了delay，而默认状态没写完整过渡规则，移出时回退到无transition状态
JS触发时delay经常“消失”
用JS改class或style后立刻看到效果，但delay没起作用——这不是bug，是浏览器渲染机制问题：
- 同步操作（如
el.classList.add('active'); el.style.opacity = '1';）可能被合并成一次重排，跳过delay阶段 - 强制重排能救急：在改样式后加
el.offsetHeight触发layout，让delay有机会生效，但会伤性能 - 更可靠的做法是：所有transition声明都写死在CSS里，只用class切换驱动；避免混用内联style
- 主线程卡住（比如长任务执行中）也会让
transition-delay: 0s看起来像卡顿，实际是第一帧渲染被推迟
负值delay不是倒播，是跳帧
transition-delay: -0.4s配transition-duration: 1s，意思是状态一变，属性值直接跳到“已执行0.4秒后”的中间态，再走剩下0.6秒。它解决不了delay失效问题，反而容易翻车：
- 如果
transition-delay: -2s但transition-duration: 1s，动画直接完成，啥也看不到 - 负delay对可访问性敏感组件（如焦点框、验证提示）风险高——视觉状态和实际状态可能不同步
- 别用它来“修复”hover或JS触发的delay失效，根源在声明缺失或渲染合并，不是起始点问题
真正容易被忽略的是：hover伪类能清晰捕捉进入/离开时间点，而JS控制依赖是否触发重排。过渡逻辑越靠近CSS声明层，越可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
