transition-delay用于控制过渡动画的启动时间，单位为秒或毫秒。它常与transition-duration、transition-property配合使用，可通过简写属性设置。支持多个延迟值以创建错落动画，如导航菜单逐项出现、卡片悬停效果等。允许负值，表示从动画中途开始。需注意避免过度堆叠延迟影响体验。
在使用 CSS 的 transition-delay 属性时，可以控制元素的过渡效果在何时开始执行。这个属性不会影响过渡本身，只决定延迟多长时间才启动动画。它非常适合用来创建有节奏感的交互动画，比如按钮悬停、菜单展开或页面加载动效。
transition-delay 基本语法
transition-delay 的值是一个时间，单位可以是秒（s）或毫秒（ms）。它通常与 transition-property、transition-duration 一起使用，也可以通过 transition 简写属性统一设置。
示例：.box {
transition-property: background-color;
transition-duration: 0.5s;
transition-delay: 0.3s;
}
或者用简写形式：
.box {
transition: background-color 0.5s 0.3s;
}
这表示背景色变化会在触发后延迟 0.3 秒再开始，持续 0.5 秒完成。
立即学习“前端免费学习笔记（深入）”；
多个属性分别设置延迟
当需要对不同属性设置不同的延迟时，可以在 transition 中用逗号分隔多个定义。
示例：让宽度先动，高度稍后动
.box {
transition: width 0.4s 0s, height 0.4s 0.2s;
}
这样，width 的过渡立即开始，height 则延迟 0.2 秒再启动，形成错落的动画效果。
实际应用场景
常见用途包括：
- 导航菜单中子项逐个出现
- 卡片悬停时文字和图标依次浮现
- 加载动画中的波纹或点按顺序显示
.item-1 { transition-delay: 0.1s; }
.item-2 { transition-delay: 0.3s; }
.item-3 { transition-delay: 0.5s; }
配合 hover 触发颜色变化，就能看到逐个响应的效果。
注意事项
transition-delay 只影响过渡的启动时间，不影响其执行过程。如果元素状态快速切换（如频繁移入移出），浏览器会根据当前状态重新计算过渡起点。同时，负值也是允许的，表示动画从中间位置开始播放。
基本上就这些。合理使用 delay 能让界面更生动，但别过度堆叠延迟，以免影响用户体验。
