transition-delay 不能通过多行声明叠加，必须在同一行用逗号分隔各属性的完整过渡定义，且 property、duration、delay 三者顺序严格一一对应；hover 离开动画需在基础样式中定义 transition；负延迟是跳帧启动而非倒放，仅对显式声明的属性生效。
transition-delay 不能靠多行声明叠加
写两行 transition: width 0.3s; 和 transition: opacity 0.6s 0.2s;，浏览器只认第二行——第一行被完全覆盖。这是简写属性的通用规则，background、font 也一样。
想让 width 立即动、opacity 延迟 0.2s，必须写在同一行里，用逗号分隔：
transition: width 0.3s, opacity 0.6s 0.2s;
注意：每个逗号分隔的片段必须至少包含属性名和持续时间；如果写了延迟，就得把缓动函数显式带上（哪怕用默认值 ease），否则整段可能被忽略。
多个属性配不同 delay 必须严格对齐顺序
拆成独立属性写时，transition-property、transition-duration、transition-delay 三者顺序必须一一对应，少一个或多一个都会截断。
立即学习“前端免费学习笔记（深入）”；
transition-property: background-color, transform, color;transition-duration: 0.2s, 0.4s, 0.3s;transition-delay: 0s, 0.15s, 0.1s;
这样 background-color 立即开始，transform 延迟 0.15s，color 延迟 0.1s。如果 transition-delay 只写了两个值，第三个 color 的 delay 就会回退到默认 0s。
hover 离开时 delay 不生效？其实是没定义“离开路径”
很多人只在 :hover 里写 transition-delay: 0.2s;，但离开时动画突兀，是因为 transition 规则没写在初始状态里。
正确做法是把完整过渡定义放在非 hover 的基础样式中：
.card {
opacity: 1;
transform: translateY(0);
transition: opacity 0.3s 0.1s, transform 0.4s 0.1s;
}
.card:hover {
opacity: 0.8;
transform: translateY(-4px);
}
这样鼠标移入、移出都走同一套过渡逻辑。如果只在 hover 里定义 transition，移出时浏览器会回退到无 transition 的原始状态。
负的 transition-delay 不是倒放，是跳帧启动
transition-delay: -0.3s 配合 transition-duration: 1s，效果是直接从 30% 进度开始播放，不是倒着动。
这种技巧适合“切入式”动效，比如图标先位移、文字后淡入，但整体又不想等太久。但要注意：
- 延迟绝对值 ≥ 持续时间（如
delay: -2s+duration: 1s）→ 动画立即完成，视觉无变化 - 慎用于焦点切换或表单验证提示，负延迟容易造成状态与视觉不同步
- JS 动态设置
element.style.transitionDelay = '-0.2s'前，得确保transition-property和transition-duration已就绪，否则无效
transition-property 里的属性起作用——没列进去的属性，哪怕 JS 改了值，也不会有过渡。 
