transition-delay 控制过渡动画开始前的空闲时间，仅影响状态变化到动画启动的间隔；需与 transition-property 一一对应，负值可跳过动画开头帧。
transition-delay 是什么，它控制谁的等待时间
transition-delay 控制的是「过渡动画真正开始前的空闲时间」，不是整个动画周期，也不是延迟后持续多久。它只影响从触发状态变化（比如 hover、class 切换）到 transition 实际启动之间的间隔。
常见误解是以为它能“暂停”正在进行的过渡，其实它只在每次过渡初始化时生效——也就是说，只有当元素的可过渡属性（如 color、opacity、transform）被重新计算并准备进入过渡流程时，transition-delay 才起作用。
怎么给不同属性设置不同的等待时间
CSS 的 transition 属性支持按顺序配对写法，transition-delay 必须和 transition-property 一一对应。不能只写一个 transition-delay: 0.3s 就指望所有属性都延后。
- 错误写法：
transition: all 0.2s; transition-delay: 0.3s;→ 这只会让all中最后一个生效的属性受延迟影响，行为不可靠 - 正确写法：
transition: opacity 0.2s 0.3s, transform 0.2s 0.1s;→opacity延迟 0.3s 启动，transform延迟 0.1s 启动 - 也可以用完整语法：
transition-property: opacity, transform; transition-duration: 0.2s, 0.2s; transition-delay: 0.3s, 0.1s;
transition-delay 在 hover 和 class 切换中表现不一致？
是的，常见问题：hover 进去有延迟，但鼠标移出时动画立刻执行（没延迟），这是因为你只写了单向 transition，没覆盖反向状态。
立即学习“前端免费学习笔记（深入）”；
- 只在默认状态写：
transition: background-color 0.3s 0.2s;→ hover 进入等 0.2s，但移出时无 delay（浏览器用默认 0s） - 解决办法：把
transition写在默认状态，并确保 duration/delay 都明确，或者在 :hover 里也写一遍（但需保持 property 一致） - 更稳妥做法：
button { transition: background-color 0.3s 0.2s; } button:hover { background-color: #007bff; }→ 移出时浏览器会自动反向插值，delay 不参与反向，但 duration 仍生效；若要移出也带延迟，得用transition: background-color 0.3s 0.2s;统一写在基础状态，再配合transition-timing-function调整节奏感
transition-delay 为负数会发生什么
transition-delay 支持负值，比如 -0.1s。它不会报错，但效果是：动画从「触发时刻往前推 0.1s 的位置」开始播放——相当于跳过开头 0.1s，直接播中间帧。
- 适合微调动画起始相位，比如让多个元素的过渡形成错落感（第一个 -0s，第二个 -0.05s，第三个 -0.1s）
- 但别设太大的负值，比如
-2s对一个0.3s动画来说，等于直接跳到结束态，用户看不到过程 - 注意兼容性：所有现代浏览器都支持负 delay，但 IE 仅支持非负值
