通过设置animation-delay可实现多个元素动画的顺序播放，利用:nth-child选择器或css变量为每个元素设定递增延迟时间，常用于列表、导航等场景的逐项显示，结合animation-fill-mode和性能优化提升体验。
在使用CSS动画时，如果想让多个元素的动画依次执行，形成顺序播放的效果，可以通过 animation-delay 属性来控制每个动画的开始时间。这种方法常用于页面加载动效、列表项逐个出现、导航菜单渐显等场景。
什么是 animation-delay？
animation-delay 定义了动画开始前等待的时间，单位可以是秒（s）或毫秒（ms）。即使设置了 animation-duration，动画也不会立即开始，而是先等待指定的延迟时间。
例如：
.element {
animation-name: slideIn;
animation-duration: 0.5s;
animation-delay: 1s;
}
这个元素会在页面加载后等待1秒，再执行持续0.5秒的 slideIn 动画。
立即学习“前端免费学习笔记（深入）”；
实现多个元素顺序播放动画
要让一组元素依次播放相同动画，只需为每个元素设置递增的 animation-delay 值。
常见做法如下：
- 给所有需要动画的元素统一设置动画名称和持续时间
- 通过类名或伪类分别为每个元素设置不同的延迟时间
- 利用 :nth-child() 选择器批量设置延迟，减少重复代码
示例：三个 div 依次从左侧滑入
@keyframes slideIn {
from { transform: translateX(-20px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
<p>.item {
animation-name: slideIn;
animation-duration: 0.6s;
opacity: 0;
}</p><p>.item:nth-child(1) { animation-delay: 0.2s; }
.item:nth-child(2) { animation-delay: 0.4s; }
.item:nth-child(3) { animation-delay: 0.6s; }</p>这样每个元素间隔0.2秒依次出现，形成流畅的顺序动画效果。
使用 CSS 变量简化管理
当动画元素较多时，手动写每个 delay 值容易出错。可以用 CSS 变量配合 JavaScript 控制，或者用预处理器如 Sass 循环生成。但纯 CSS 中也可以借助计算优化：
.container .item {
--delay: calc(0.1s * var(--order, 0));
animation: fadeIn 0.4s forwards;
animation-delay: var(--delay);
}
然后在 HTML 中指定自定义属性：
<div class="container"> <div class="item" style="--order:1;">Item 1</div> <div class="item" style="--order:2;">Item 2</div> <div class="item" style="--order:3;">Item 3</div> </div>
这种方式更灵活，便于后期调整整体节奏。
注意事项
使用 animation-delay 实现顺序动画时需要注意几点：
- 确保父容器不会因动画过程中的 visibility:hidden 或 display:none 而影响布局
- 若希望动画只执行一次，记得设置 animation-fill-mode: forwards 保持最终状态
- 移动端注意性能，避免过多同时重绘；可适当降低动画时长或简化关键帧
- 对无障碍友好性考虑，可通过 prefers-reduced-motion 减少或关闭动画
基本上就这些。合理使用 animation-delay，能让你的界面动效更有节奏感，提升用户体验又不显杂乱。
