transition-delay用于设置过渡效果的延迟时间，单位为秒或毫秒，默认值为0s。可单独使用或在transition简写中定义，常用于控制多属性按序过渡，如图标变色后文字滑入、菜单逐项淡入等。支持为不同属性设置不同延迟，语法为逗号分隔的多个时间值，负值可使动画从中段开始。延迟仅推迟启动，不影响持续时间。
在CSS中，transition-delay 属性用于定义过渡效果开始执行的时间延迟。也就是说，它控制元素的样式变化在触发后，等待多久才真正开始动画过程。这个属性在制作细腻的交互动效时非常实用。
基本语法与用法
transition-delay 的值是一个时间，单位可以是秒（s）或毫秒（ms）。例如：
transition-delay: 0.5s; transition-delay: 200ms;默认值是 0s，表示没有延迟，过渡立即开始。
它可以单独使用，也可以和 transition-property、transition-duration、transition-timing-function 一起写在 transition 简写属性中。
立即学习“前端免费学习笔记（深入）”；
常见应用场景
通过设置延迟，可以让多个属性按顺序过渡，或者让某些动效“慢半拍”出现，增强视觉层次感。
- 当鼠标悬停时，让图标先变色，文字稍后才滑入，提升阅读节奏
- 在菜单展开中，让子项逐个淡入，营造渐进式动画
- 按钮点击反馈中，延迟震动或阴影变化，避免同时触发太多效果造成混乱
多属性分别设置延迟
如果一个元素有多个过渡属性，可以通过逗号分隔的方式为每个属性指定不同的延迟时间：
transition-property: background-color, transform, opacity;
transition-duration: 0.3s, 0.5s, 0.4s;
transition-delay: 0s, 0.1s, 0.2s;
上述代码表示：背景色立即变化，transform 延迟0.1秒，opacity 延迟0.2秒。
使用简写形式会更简洁：
transition: background-color 0.3s 0s, transform 0.5s 0.1s, opacity 0.4s 0.2s;注意事项
延迟只是推迟动画开始时间，并不会影响动画持续时长或结束时机。即使设置了延迟，只要触发了状态变化（如 hover），计时就开始。
如果设置为负值，比如 transition-delay: -0.2s，则过渡会从动画中间开始，相当于提前播放了前0.2秒的内容，这种用法较少见，但可用于无缝循环动画。
基本上就这些，合理使用 transition-delay 能让界面动效更有节奏感和专业感。不复杂但容易忽略。
