用transition-delay可精准控制各属性动画启动时机，如background-color 0.3s 0s, border-width 0.3s 0.1s, color 0.3s 0.2s；避免transition:all，需单独声明属性、时长与延迟，并用开发者工具验证。
过渡效果顺序不对，通常是因为多个属性同时开始动画，没按预期分步执行。用 transition-delay 可以精准控制每个属性的启动时间，让动画按需错开。
明确哪些属性需要错开动画
先确认你希望谁先动、谁后动。比如按钮悬停时，背景色先变，边框再加粗，文字颜色最后渐变——这三个变化就得分别设置延迟。
- 只对需要错开的属性单独写
transition，避免用transition: all覆盖全部 - 给每个属性配独立的
transition-property+transition-duration+transition-delay - 例如：
transition: background-color 0.3s 0s, border-width 0.3s 0.1s, color 0.3s 0.2s;
注意 transition-delay 的单位和取值
transition-delay 支持秒（s）和毫秒（ms），负值也合法——它会让动画从中间某刻开始，适合“衔接式”动效。
- 正延迟：等一段时间再启动，实现“后发”效果
- 负延迟：动画立即开始，但跳过前半段，常用于循环动画对齐
- 延迟值不会影响动画总时长，只改变起始时机
避免被简写 transition 覆盖
如果用了 transition: 0.3s ease; 这类简写，会把 delay 设为 0，覆盖之前定义的延迟。务必统一用完整写法或分开声明。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
transition-property: background-color, border;transition-duration: 0.3s, 0.3s;transition-delay: 0s, 0.15s; - 或者单行写全：
transition: background-color 0.3s 0s, border 0.3s 0.15s;
配合 :hover 或 class 切换验证时机
延迟是否生效，得在真实交互中看。用浏览器开发者工具的“动画检查器”（Animation Inspector）可逐帧查看每个属性的触发时间点。
- 鼠标悬停后，观察各属性动画条是否按设定延迟出现
- 若仍同步，检查是否有其他 CSS 规则覆盖了 transition 设置
- 确保目标属性是可过渡的（如
display不支持，改用opacity或visibility）
