css animation-delay如何实现顺序播放效果-css教程-PHP中文网

css animation-delay如何实现顺序播放效果

P粉602998670

发布： 2025-10-08 14:41:02

原创

671人浏览过

使用animation-delay属性可实现CSS动画顺序播放，通过为不同元素设置递增延迟时间，如li:nth-child(n)分别延迟0s、0.2s、0.4s等，结合slideIn动画使列表项依次滑入，形成流畅的序列效果。

css animation-delay如何实现顺序播放效果

要让 CSS 动画实现顺序播放效果，关键是使用 animation-delay 属性为不同元素设置不同的延迟时间，从而形成依次执行的动画序列。

理解 animation-delay 的作用

animation-delay 定义动画开始前等待的时间，单位可以是秒（s）或毫秒（ms）。即使多个元素使用相同的动画名称和持续时间，通过设置不同的延迟值，就能控制它们在不同时间点启动。

例如：

.animation-1 { animation-delay: 0s; }
.animation-2 { animation-delay: 0.5s; }
.animation-3 { animation-delay: 1s; }

这样三个元素会每隔 0.5 秒依次开始动画。

立即学习“前端免费学习笔记（深入）”；

实际应用：列表项依次飞入

假设有一组列表项，希望它们从右侧依次滑入视野：

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情

给每个 <li> 设置相同的动画名称和时长
利用子元素索引递增 delay 值
推荐使用 :nth-child 选择器分配延迟

示例代码：

@keyframes slideIn {
from { transform: translateX(100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}

li {
animation: slideIn 0.6s ease-out forwards;
}

li:nth-child(1) { animation-delay: 0s; }
li:nth-child(2) { animation-delay: 0.2s; }
li:nth-child(3) { animation-delay: 0.4s; }
li:nth-child(4) { animation-delay: 0.6s; }