在网页交互设计中，让一组元素按照先后顺序播放动画能够显著提升视觉引导效果。CSS原生的animation-delay属性正是控制动画起始时间的利器，只需为每个目标元素指定不同的延迟量，就能拼出一条清晰的时间轴，而不必依赖任何脚本逻辑。
animation-delay基础概念
animation-delay是CSS animation简写属性中的一个独立子属性，用来定义动画在绑定到元素之后，等待多长时间才开始执行。它的默认值是0s，也就是说动画会在应用的那一刻立即播放。当赋予正数值时，浏览器会将该元素动画的启动时间点向后推移。
这个属性接受的时间单位包括秒（s）和毫秒（ms），也支持小数写法，例如0.5s等同于500ms。除了正数，它还可以取负数，负数并不代表“提前结束”，而是告诉浏览器动画已经处于时间线的负向偏移位置，元素会直接展示动画过程中对应那一帧的状态。理解这一点对制作循环序列动效非常关键。
用animation-delay编排顺序播放
设想一个列表，包含三个条目，我们希望它们依次淡入并上移。最直接的方式是给每个条目设置同样的动画名称与时长，但通过class或nth-child选择器递增delay值。这样第一条立即动，第二条等0.2秒，第三条等0.4秒，视觉上就形成了顺序出现的效果。
下面是一段完整的演示代码，展示了如何仅用CSS实现三行文字的顺序淡入。注意在code块内部，所有的尖括号都做了转义处理，你可以直接复制到样式文件使用。
.item {
opacity: 0;
animation: fadeInUp 0.6s ease forwards;
}
.item:nth-child(1) {
animation-delay: 0s;
}
.item:nth-child(2) {
animation-delay: 0.2s;
}
.item:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
上述写法中，我们在初始状态把opacity设为0，并给动画加上forwards填充模式，确保动画播完之后元素停留在终态。如果省略fill-mode，在delay期间以及动画结束后元素都会回归原始样式，造成闪烁或不可见的问题。
负延迟与循环序列的技巧
当动画设置为无限循环（infinite）时，使用负数delay可以制造“已经在播”的错觉。比如三个元素共享同一个3秒循环动画，分别设置delay为0s、-1s、-2s，它们就会像跑马灯一样处于动画的不同阶段，而不是齐刷刷地同步运动。
这种手法在加载指示器或背景流光场景中很实用。下面的示例用负延迟让三个圆点错开呼吸节奏：
.dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: #3498db;
animation: breathe 1.5s infinite ease-in-out;
}
.dot:nth-child(1) { animation-delay: 0s; }
.dot:nth-child(2) { animation-delay: -0.5s; }
.dot:nth-child(3) { animation-delay: -1s; }
@keyframes breathe {
0%, 100% { transform: scale(0.6); opacity: 0.4; }
50% { transform: scale(1); opacity: 1; }
}
这里第二个点相当于从动画半秒前的状态开始，第三个点从一秒前开始。由于总时长一点五秒，三个点恰好均匀分布，形成连续波动。相比用JavaScript计时器去切换class，纯CSS方案性能更稳，也更容易维护。
常见误区与规避办法
不少人在使用animation-delay时忽略了fill-mode，导致元素在延迟等待期内显示为原始状态（例如opacity为1），动画一开始又突然跳回from状态，产生明显跳变。解决办法是统一设置animation-fill-mode为both或forwards，让元素在等待期就应用from帧的样式。
另一个误区是试图用transition加setTimeout来模拟顺序动画，这不仅增加脚本负担，还难以与页面卸载或标签页后台挂起保持同步。CSS的animation-delay由渲染引擎调度，在后台标签中会自动暂停计时，回到前台也能正确接续，可靠性更高。因此，只要动画逻辑是固定的时间序列，优先采用animation-delay才是最优解。
小结
通过合理分配animation-delay的数值，无论是正延迟带来的依次触发，还是负延迟制造的错相循环，都能用极少量CSS完成富有节奏感的界面动效。结合fill-mode与keyframes，开发者可以脱离JavaScript，构建出轻量且流畅的顺序播放体验。
CSS动画animation-delay顺序播放修改时间：2026-08-04 12:54:30