CSS动画顺序执行核心是用animation-delay控制启动时机，配合forwards保持终态，通过nth-child或CSS变量动态计算延迟值，优先使用transform/opacity等高性能属性。
CSS 动画顺序执行，核心是利用 animation-delay 控制每个元素的启动时机，让它们“错峰”播放，形成连贯的序列效果。关键不在于强行阻塞，而是通过时间偏移让动画自然衔接或间隔触发。
用 animation-delay 实现逐个入场
给一组同类元素（如列表项、卡片）设置相同的动画，但为每个元素设置递增的 animation-delay 值：
- HTML 中保持结构简洁，例如：
<div class="item"></div> <div class="item"></div> <div class="item"></div> - CSS 中用
:nth-child(n)或:nth-of-type(n)为不同位置的元素添加不同延迟：
`.item { animation: fadeIn 0.4s ease-out; }`
`.item:nth-child(1) { animation-delay: 0s; }`
`.item:nth-child(2) { animation-delay: 0.2s; }`
`.item:nth-child(3) { animation-delay: 0.4s; }` - 这样三个元素会分别在 0s、0.2s、0.4s 开始播放，视觉上就是依次淡入
配合 animation-fill-mode 保持最终状态
动画播完后默认会“回退”到初始样式，影响后续交互或布局。加上 animation-fill-mode: forwards 可让元素停留在最后一帧：
.item { animation: slideIn 0.5s cubic-bezier(0.2, 0.8, 0.4, 1) forwards; }- 否则即使 delay 错开了，动画一结束元素可能突然跳回原位，破坏顺序感
- 尤其做位移（translate）、缩放（scale）类动画时，
forwards几乎必加
用 CSS 自定义属性 + calc 简化多元素延迟管理
当元素数量多（比如 10 个导航项），手写 nth-child 易出错。可用 CSS 变量动态计算 delay：
立即学习“前端免费学习笔记（深入）”；
- 给父容器设变量：
.list { --delay-step: 0.15s; } - 子元素用
calc计算延迟：
`.item:nth-child(1) { animation-delay: calc(var(--delay-step) * 0); }`
`.item:nth-child(2) { animation-delay: calc(var(--delay-step) * 1); }`
`.item:nth-child(3) { animation-delay: calc(var(--delay-step) * 2); }` - 更进一步，可结合
counter或 JS 动态注入变量，实现完全可配置的序列节奏
注意动画触发时机与重排/重绘开销
延迟本身不触发重排，但动画过程中的 transform、opacity 属性较安全；避免对 width、height、left/top 等触发布局的属性做延迟动画：
- 推荐组合：
transform + opacity + animation-timing-function，性能好且易控制节奏 - 如果用 JS 触发动画（如 scroll 进入视区），记得用
getBoundingClientRect()判断可见性后再批量添加类名，再靠 CSS delay 排队，别在 JS 里 setTimeout 控制每个元素 - 移动端要注意过长的 delay 链可能导致首屏动画感知延迟，建议总序列时长控制在 1 秒内较稳妥
