如何为CSS transition配置不同延迟时间

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 三者顺序必须一一对应，少一个或多一个都会截断。

1. transition-property: background-color, transform, color;
2. transition-duration: 0.2s, 0.4s, 0.3s;
3. 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% 进度开始播放，不是倒着动。

这种技巧适合“切入式”动效，比如图标先位移、文字后淡入，但整体又不想等太久。但要注意：

1. 延迟绝对值 ≥ 持续时间（如 delay: -2s + duration: 1s）→ 动画立即完成，视觉无变化
2. 慎用于焦点切换或表单验证提示，负延迟容易造成状态与视觉不同步
3. JS 动态设置 element.style.transitionDelay = '-0.2s' 前，得确保 transition-property 和 transition-duration 已就绪，否则无效

实际中最容易被忽略的是：transition 的 delay 是按属性粒度生效的，不是整个元素统一延迟；而且它只对显式声明在 transition-property 里的属性起作用——没列进去的属性，哪怕 JS 改了值，也不会有过渡。