<p>最稳方案是用@for循环生成animation-delay，但需注意：Sass中$i * 0.1s会报错，应写为#{math.div($i,10)}s；nth-child可能因DOM干扰失配，推荐data-index或nth-of-type；多动画时delay顺序须与animation名称严格对应；延迟步长宜为0.05s～0.2s，总跨度≤动画时长1.5倍。</p>
直接用 @for 循环生成 animation-delay 是最稳的方案，但写错单位或索引就全白搭。
为什么 $i * 0.1s 会编译报错
Sass 不允许数字和单位在算术表达式里直接拼接，$i * 0.1s 被当成「数字 × 字符串」，编译器直接拒绝，报错类似 Invalid CSS after ": $i * 0.1s"。
- 正确写法是先算纯数字再拼单位：用
#{math.div($i, 10)}s（Sass ≥ 1.33） - 老版本可用
#{($i / 10) + 's'}，但必须加引号，且依赖unquote()才能输出合法 CSS - 别用
unit($i * 0.1, s)—— 它不处理小数精度，可能产出0.30000000000000004s
:nth-child(#{$i}) 匹配不到元素？检查 DOM 结构
:nth-child 数的是父容器里所有子元素的序号，不是第几个目标元素。只要前面插了个 <h2> 或空 <div>，.item:nth-child(2) 就会错位。
- 最保险的做法：给每个目标元素加
data-index属性，用[data-index="#{$i}"]选择 - 若全是同标签（比如都用
<li>），可改用:nth-of-type(#{$i}) - 硬要保留
:nth-child，就得确保目标元素在 DOM 中连续、无干扰兄弟节点
多动画叠加时，animation-delay 的逗号顺序不能乱
当你写 animation: slide 0.4s, fade 0.3s，对应的 animation-delay: 0.2s, 0.5s 必须严格按动画名顺序一一对应——第一个延迟给 slide，第二个给 fade。
立即学习“前端免费学习笔记（深入）”；
- 漏写一个值，后面那个动画就会用默认
0s，看起来像“没延迟” - 多写一个值，多余部分被忽略；少写则循环补零（比如只写
0.1s，两个动画都延 0.1s） - DevTools 的 Animations 面板里能看到每条轨道的 pending 时间段，比猜靠谱得多
延迟步长和总跨度得配合动画时长来定
设了 animation-duration: 0.4s，又给第 12 个元素配 animation-delay: 1.8s，它其实在第 2.2 秒才结束——用户早划走了。
- 单步延迟建议控制在
0.05s～0.2s：太小看不出节奏，太大显断续 - 总延迟跨度（最大 delay − 最小 delay）最好 ≤ 动画时长的 1.5 倍，否则队列感断裂
- 负 delay（如
-0.2s）能跳过前段，实现“无缝衔接入场”，但得确保动画本身够长
真正容易被忽略的是：SCSS 编译时生成的 delay 是静态的，一旦 HTML 渲染顺序或数量变了，就得重编译；动态列表建议切到 CSS 变量 + :nth-child() 计算，或者 JS 控制 style.animationDelay。
