transition-delay用于设置过渡效果的延迟时间，语法为transition-delay: ，单位为秒或毫秒；可与transition-property、transition-duration配合使用，也可在简写属性transition中按“property duration delay”顺序定义多个属性的不同延迟，实现错落动画效果。
在CSS中，transition-delay 用于定义过渡效果开始执行的时间。也就是说，它控制属性变化后，延迟多久才开始播放过渡动画。
基本语法
transition-delay:其中 可以是秒（s）或毫秒（ms）。例如：
- transition-delay: 0.5s; — 延迟0.5秒
- transition-delay: 200ms; — 延迟200毫秒
- transition-delay: 0s; — 无延迟，立即开始（默认值）
与 transition-property 搭配使用
通常你不会单独使用 transition-delay，而是和 transition-property、transition-duration 等一起设置。例如：
.box { width: 100px; transition-property: width; transition-duration: 0.3s; transition-delay: 0.2s; } .box:hover { width: 200px; }当鼠标悬停时，宽度变化不会立刻开始过渡，而是等待0.2秒后再用0.3秒完成变宽。
立即学习“前端免费学习笔记（深入）”；
多个属性分别设置延迟
如果你同时过渡多个属性，可以为每个属性指定不同的延迟时间，用逗号分隔：
.box { width: 100px; height: 50px; transition-property: width, height; transition-duration: 0.3s, 0.5s; transition-delay: 0.2s, 0.6s; }
这里 width 的过渡在变化后0.2秒开始，持续0.3秒；height 则在0.6秒后开始，持续0.5秒。
简写形式更常用
实际开发中，推荐使用 transition 简写属性，把 duration 和 delay 写在一起：
transition: width 0.3s 0.2s, height 0.5s 0.6s;格式为：property duration delay（delay 在 duration 后面）
例如：
.box { transition: width 0.3s 0.2s, height 0.5s 0.6s; }基本上就这些。合理使用 transition-delay 能让动画更有节奏感，比如实现逐个淡入、错落出现的效果，不复杂但容易忽略细节。
