最稳妥做法是为每个单独设置animation和animation-delay；禁用父容器统设或伪类计算，避免错位；须用opacity/transform等可动画属性，visibility/display无法触发过渡；兼容性上优先采用0.2s整数倍延迟。
用 @keyframes 配合 animation-delay 控制列表项逐个入场
直接给每个 加 animation-delay 是最稳妥的做法，不要试图用 CSS 伪类或 JS 动态计算延迟——容易错位、难维护。
常见错误是把 animation-delay 写在父容器（比如 :nth-child(n) 但没写对索引，导致第 1 项延迟 0s 反而卡住。
- 每项独立加动画：给
单独设animation和animation-delay - 延迟值建议用
calc()或预设变量：比如animation-delay: calc(var(--i, 0) * 0.2s);（需配合 JS 注入--i），否则就得手写:nth-child(1) { animation-delay: 0s; }、:nth-child(2) { animation-delay: 0.2s; }…… - 动画必须定义
opacity或transform等可过渡属性，只靠display: none → block不会触发 CSS 动画
为什么不能只靠 transition + visibility 实现逐个淡入
transition 对 visibility 无效，对 display 完全无效——这是最容易踩的坑。想用过渡效果，必须用 opacity + transform 模拟“显示/隐藏”，再配合 animation-delay 控制节奏。
-
visibility: hidden可以过渡，但视觉上仍是占位的，不符合“出场”预期 -
display: none一设就消失，没有中间状态，transition根本不触发 - 真正可用的组合是：
opacity: 0 → 1+transform: translateY(10px) → translateY(0)，再配animation-fill-mode: forwards锁定最终态
animation-delay 在不同浏览器中的兼容性表现
所有现代浏览器都支持 animation-delay，包括 Safari 12.1+ 和 Edge 79+，但老版本 Safari（≤12）对小数秒延迟（如 0.15s）可能四舍五入成 0.2s，造成节奏跳变。
- 避免用
0.15s、0.25s这类非整数倍延迟，统一用0.2s、0.4s更稳 - 如果列表项动态增删，纯 CSS 方案会失效——此时得切到 JS 控制
style.animationDelay，别硬撑 - 移动端 iOS Safari 对大量连续
@keyframes的渲染压力略高，超过 20 项建议分批触发或加节流
一个能直接抄的最小可行示例
下面这段代码复制粘贴就能跑，注意 必须有 class 才能命中选择器：
ul li {
opacity: 0;
transform: translateY(8px);
animation: fadeInUp 0.4s ease forwards;
}
ul li:nth-child(1) { animation-delay: 0s; }
ul li:nth-child(2) { animation-delay: 0.2s; }
ul li:nth-child(3) { animation-delay: 0.4s; }
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
如果项数不确定，就别死磕 :nth-child，改用 JS 绑定更实际——CSS 不是万能的，尤其当延迟逻辑变复杂时。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
