用 animation-delay 配合 animation-fill-mode: backwards 和 forwards 可实现多个元素依次平滑动画：backwards 使延迟期冻结在首帧，forwards 固化终态，避免闪动或回弹。
animation-delay 怎么让多个元素依次动起来
靠给每个元素设不同 animation-delay 值，是最直接、最轻量的顺序控制方式。它不依赖 JS，也不需要监听动画结束事件，浏览器原生支持，兼容性好到 IE10+ 都能跑。
关键不是“等前一个播完再播下一个”，而是“所有元素同时准备就绪，但各自在不同时间点启动”。所以你得提前算好延迟节奏，比如 0s、0.2s、0.4s 这种等差序列。
- 用
:nth-child(n)或:nth-of-type(n)批量设置延迟，避免手写一堆类名 - 延迟值建议控制在
0.1s–0.3s区间：太小看不出顺序，太大显得拖沓 - 如果元素是动态插入（如 JS append），要确保 DOM 已挂载后再加动画类，否则
animation-delay不触发
为什么加了 delay 还是“闪一下才动”
这是没配 animation-fill-mode: backwards 的典型表现。只设 animation-delay: 0.5s，元素在 0–0.5s 期间仍显示原始样式；到 0.5s 瞬间跳到动画第一帧，再开始播放 → 视觉上就是“闪”。
加上 backwards 后，延迟期就“冻结”在 @keyframes 的 0% 状态，时间一到自然过渡，观感顺滑。
-
animation-fill-mode: backwards必须和animation-delay同时存在才生效 - 别只写
forwards—— 它只管动画结束后的状态，对延迟期无效 - 若动画起始态和默认态一致（比如都是
opacity: 1），backwards效果不可见，但逻辑上仍建议保留
animation-fill-mode: forwards 为什么几乎必加
不加 forwards，动画播完立刻回退到初始样式。比如用 transform: translateX(100px) 做入场，播完元素会“啪”地弹回原位，后续点击、布局、兄弟元素定位全乱套。
尤其当动画含位移、缩放、透明度变化时，终态丢失会直接破坏 UI 逻辑。
-
animation-fill-mode: forwards让元素停在@keyframes最后一帧定义的样式上 - 必须配合
animation-iteration-count: 1使用，否则循环动画下forwards意义不大 - 注意：它不会影响动画过程中的交互响应，只是固化终态样式
多个动画链式执行时 delay 怎么叠加计算
一个元素上叠加多个 animation（比如先淡入再滑入），它们的 animation-delay 是各自独立的，互不干扰。但你要手动对齐时间轴，否则容易错位。
例如：fade-in 动画长 0.3s，你想让它播完再播 slide-in，那 slide-in 的 animation-delay 至少设为 0.3s，不能只靠视觉估。
- 避免用“动画 A 结束后自动触发 B”这种 JS 思维，纯 CSS 里没有回调机制
- 复杂链式场景建议合并进一个
@keyframes，用百分比分段控制，更可控 - 若必须拆成多个动画，推荐用 CSS 自定义属性（
--delay-step）统一管理延迟基数，方便后期调整
backwards 和 forwards 的组合使用——少了任一个，顺序动画都可能在视觉或交互层露馅。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
