CSS动画延迟animation-delay应用_实现顺序播放效果

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

CSS动画延迟animation-delay应用_实现顺序播放效果

2025-11-24

浏览次数：次

返回列表

通过设置animation-delay可实现多个元素动画的顺序播放，利用:nth-child选择器或CSS变量为每个元素设定递增延迟时间，常用于列表、导航等场景的逐项显示，结合animation-fill-mode和性能优化提升体验。

css动画延迟animation-delay应用_实现顺序播放效果

在使用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秒依次出现，形成流畅的顺序动画效果。

Avatar AI

AI成像模型，可以从你的照片中生成逼真的4K头像

92 查看详情 Avatar AI

使用 CSS 变量简化管理

当动画元素较多时，手动写每个 delay 值容易出错。可以用 CSS 变量配合 J*aScript 控制，或者用预处理器如 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>

这种方式更灵活，便于后期调整整体节奏。