transition-delay用于设置CSS过渡动画的延迟时间，单位为秒或毫秒，默认值为0。通过为不同元素设置递增的延迟时间，可实现按顺序播放的动画效果。例如在鼠标悬停时，背景色立即变化而文字颜色延迟0.2s变化，形成错落感；多个图标可通过:nth-child选择器分别设置0.1s、0.3s、0.5s延迟，实现依次淡入。实际开发中常结合JavaScript添加类来触发动画，如模态框场景中背景、弹窗、按钮分别设置0s、0.2s、0.4s延迟，引导用户视觉焦点。使用时应控制延迟在0.6s内，避免卡顿，确保触发条件明确，并注意移动端性能优化。搭配transition-timing-function可使动画节奏更自然，无需JS动画库即可实现富有层次感的过渡效果。
在使用CSS实现动画效果时，transition-delay 是一个非常实用的属性，它能控制过渡动画的启动时间。通过为不同元素设置不同的延迟时间，可以轻松实现有节奏、按顺序播放的动画效果，让页面更具动感和层次感。
什么是 transition-delay？
transition-delay 定义了过渡效果开始前需要等待的时间，单位为秒（s）或毫秒（ms）。默认值是 0，表示立即开始。如果设置为 0.5s，则该元素的过渡会在触发后等待半秒才开始执行。
示例：
假设有一个按钮，鼠标悬停时背景色和文字位置同时变化：
立即学习“前端免费学习笔记（深入）”；
.button {
background: #ccc;
color: #000;
padding: 10px 20px;
transition: background 0.3s, color 0.3s 0.2s;
}
.button:hover {
background: #333;
color: #fff;
}
这里，背景色在悬停后立即变化，而文字颜色会延迟 0.2 秒再变化，形成错落感。
实现元素依次动画的技巧
当多个元素需要按顺序动起来时，比如导航项、列表或卡片，可以为每个元素单独设置递增的 transition-delay 值。
例如，三个图标依次淡入显示：
.icon {
opacity: 0;
transform: translateY(20px);
transition: all 0.4s ease;
}
.icon:nth-child(1) { transition-delay: 0.1s; }
.icon:nth-child(2) { transition-delay: 0.3s; }
.icon:nth-child(3) { transition-delay: 0.5s; }
/ 触发动画 /
.container.active .icon {
opacity: 1;
transform: translateY(0);
}
当容器添加 .active 类时，三个图标会依次出现，形成流畅的入场动画。
结合类切换控制动画节奏
实际开发中，常通过 JavaScript 添加或移除类来触发动画。配合 transition-delay，可精确控制每个环节的出场时机。
应用场景如：模态框弹出时，背景先变暗，接着弹窗滑入，最后按钮渐显。
- 背景 overlay：transition-delay 0s
- 弹窗主体 modal：transition-delay 0.2s
- 按钮 action-btn：transition-delay 0.4s
这样用户视觉焦点会被自然引导，提升体验。
注意事项与优化建议
使用 transition-delay 时需注意以下几点：
- 延迟时间不宜过长，一般控制在 0.6s 内，避免让用户感觉卡顿
- 确保触发条件明确（如 hover、focus 或 class 切换），防止动画意外触发
- 移动端注意性能，过多延迟动画可能影响流畅性
- 可搭配 transition-timing-function 使用，让节奏更自然
基本上就这些。合理利用 transition-delay，不需要 JavaScript 动画库也能做出漂亮的顺序过渡效果。关键是规划好每个元素的出场时间，让动画有呼吸感，不拥挤也不冷场。
