animation-delay需手动为每个元素设置递增值，浏览器不会自动分配；静态场景用:nth-child(n)配合不同延迟值，动态场景须用JS按索引计算style.animationDelay。
animation-delay 的计算逻辑必须手动写死
浏览器不会自动给一组卡片分配递增的 animation-delay，你得自己算好每个元素的延迟值。比如 5 张卡片、每张间隔 0.2s，就得分别写 animation-delay: 0s、0.2s、0.4s……不能只靠一个 class 统一控制。
常见错误是直接给所有卡片加同一个 animation-delay: 0.2s，结果全部卡在第 0.2 秒一起动——延迟值没差异化，就不是“依次”。
- 用 CSS 预处理器（如 Sass）可配合
@for循环生成不同延迟值 - 纯 CSS 可借助 :nth-child(n) 选择器，例如
.card:nth-child(1) { animation-delay: 0s; }、.card:nth-child(2) { animation-delay: 0.2s; } - 若卡片数量不固定（如动态渲染），CSS 就力不从心，得切到 JS 控制
style.animationDelay
:nth-child(n) 是最简可行的静态方案
适用于卡片数量确定、DOM 结构稳定的情况。注意 :nth-child 看的是父容器下的子元素位置，不是卡片自身的类名顺序。如果中间插了其他非卡片元素（比如 <div class="spacer"></div>），序号就会错位。
示例写法：
立即学习“前端免费学习笔记（深入）”；
.card {
animation: slideIn 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; }
@keyframes slideIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}- 延迟值建议从 0 开始，避免首张卡片“空等”
-
animation-fill-mode: forwards必须加上，否则动画结束瞬间会回退到初始状态 - 不要依赖
:nth-of-type，除非所有卡片都是同一种标签（如全是<article>）且无其他同类标签混入
JS 动态设置 animation-delay 更适合真实项目
React/Vue 项目里卡片常由数组 map 渲染，DOM 节点数量不确定，此时硬写 :nth-child 既难维护又易出错。直接在渲染时注入内联样式更可控。
关键点：
- 延迟值应基于索引计算，例如
index * 0.15，单位必须带s或ms - 确保动画触发时机一致：所有卡片初始状态需为
opacity: 0; transform: ...，且不提前触发动画（避免加 class 太早） - 若卡片进入视口才动画（懒加载场景），就不能只靠索引，得监听
IntersectionObserver，再对可见卡片逐个设style.animationDelay
简易 React 示例片段：
cards.map((card, i) => (
<div
key={card.id}
className="card"
style={{ animationDelay: `${i * 0.15}s` }}
>
{card.content}
</div>
));animation-delay 和 transition-delay 容易混淆
animation-delay 控制的是整个 @keyframes 动画开始前的等待时间；而 transition-delay 是响应式变化（如 hover、class 切换）发生后，过渡效果启动前的等待。两者作用对象和触发机制完全不同。
误用典型：
- 想让卡片列表 hover 后逐个放大，却给
transform加transition-delay—— 这只会让所有卡片在同一时刻开始过渡，因为 hover 是瞬间施加到所有元素的 - 用
@keyframes做入场动画，却去调transition-delay，完全无效 - 同时写了
animation和transition，可能产生意外交互，比如动画执行中又触发 transition，导致跳帧或重绘异常
真正需要序列入场时，只盯死 animation-delay 就够了，别让它和 transition 搅在一起。
最常被忽略的是动画重播逻辑：用户反复进出页面，若没清空或重置 animation 状态，延迟可能累积或错乱。稳妥做法是每次入场前移除 class 再重加，或用 animation-play-state 控制暂停/播放。
