如何制作HTML CSS多元素交错延迟动画的复杂交错动画效果？

本文共计1101个文字，预计阅读时间需要5分钟。

核心是复用同一套动画规则，仅靠 `animation-delay` 调整启动时间。无需为每个元素编写动画规则，既节省维护又避免CSS解析开销。

静态列表（比如固定 5 个卡片）直接用 :nth-child(n)：

.card { animation: fadeIn 0.4s ease-out forwards; } .card:nth-child(1) { animation-delay: 0s; } .card:nth-child(2) { animation-delay: 0.15s; } .card:nth-child(3) { animation-delay: 0.3s; } .card:nth-child(4) { animation-delay: 0.45s; } .card:nth-child(5) { animation-delay: 0.6s; }

• 别用 :nth-of-type，父容器里只要混一个 <span> 或文本节点，序号就全乱
• 延迟值建议用小数（如 0.15s），整数秒（1s）容易产生明显卡顿感
• 如果元素数量不固定（比如 JS 动态插入），纯 CSS 方案会失效，必须切到 JS 控制

动态列表怎么批量设置 animation-delay

不能先 innerHTML = '' 再 querySelectorAll + forEach —— DOM 渲染有微小延迟，部分元素可能还没挂载就被跳过；更糟的是，类名还没生效时就查，.card 根本选不到。