animation-delay 实现交错入场需配合可动画属性（如 opacity+transform）、animation-fill-mode: forwards、逐元素设置延迟（推荐 :nth-child(n) + css 变量统一步长），多动画须合并声明且参数严格对应。
直接用 animation-delay 就能实现交错入场，但必须配合可动画属性和正确的延迟节奏，否则元素会“闪一下”就回退、错位或根本不动。
为什么写了 animation-delay 却没效果
常见原因是用了不可动画的属性，比如只改 display 或 visibility。这两个值本身不支持过渡或动画——display: none 一设就消失，中间没状态；visibility: hidden 虽然能过渡，但依然占位，视觉上不算“入场”。
- 真正可用的组合是
opacity+transform，例如从opacity: 0; transform: translateY(10px)到opacity: 1; transform: translateY(0) - 必须加
animation-fill-mode: forwards，否则动画一结束就跳回初始态 - 别把
animation-delay写在父容器上（比如ul），它不会继承到子元素，得每个元素单独设或用:nth-child()精确匹配
怎么用 :nth-child 正确设置递增延迟
:nth-child(n) 是最常用也最容易翻车的方式：索引错一位，整个队列就偏移。比如你有 5 个 .item，但父容器里混了一个 span 或空文本节点，:nth-child(2) 就可能命中那个非目标元素。
- 优先用
:nth-child(n)，而不是:nth-of-type(n)，除非你 100% 确认父容器只有同类标签 - 延迟值建议用小数，如
0.15s，避免整数秒导致节奏生硬 - 手写时推荐从
:nth-child(1) { animation-delay: 0s; }开始，逐项递增，别跳着写 - 如果元素数量多，用 CSS 变量统一管理步长：定义
--step: 0.2s，然后写animation-delay: calc(var(--step) * 0);、calc(var(--step) * 1)……更安全
多个动画并存时 delay 怎么配对
一个元素上跑两个动画（比如先淡入再上滑），不能写两行 animation，浏览器只认最后一行。必须合并成逗号分隔的多值语法，且每个参数顺序严格对应。
- 错误写法：
animation: fade-in 0.3s; animation: slide-up 0.4s 0.3s;→ 后者覆盖前者 - 正确写法：
animation-name: fade-in, slide-up; animation-duration: 0.3s, 0.4s; animation-delay: 0s, 0.3s; - 特别注意：
animation-fill-mode: forwards, forwards也要一一对应，少一个或顺序错，后一个动画的终态就锁不住 - 如果两个动画都改
transform，后启动的那个会覆盖前一个的最终位置——这不是forwards失效，而是属性被重写了
延迟值怎么算才不翻车
animation-delay 不是随便填个数字就行。它和前一个动画的 animation-duration 必须对齐，否则会出现空档或重叠。
- 比如第一个动画持续
0.4s，第二个想紧接其后，延迟就得设成0.4s，设成0.35s就提前切入，0.45s就留白 - 单位统一用
s，不用ms，小数点后最多两位（如0.25s），避免渲染引擎解析抖动 - 负值
animation-delay可以让动画从中间开始播，适合做无缝滚动，但别在交错入场里乱用，容易失控
最易被忽略的一点：交错入场不是“让每个元素晚一点开始”，而是“让每个元素在视觉节奏中稳稳落位”。延迟值、动画时长、fill-mode、属性冲突——四个点只要漏掉一个，效果就断层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
