如何仅用CSS3+SASS实现n个HTML元素的依次顺序动画？

当然可以！用 CSS3 搭配 SASS 的循环功能完全能实现这个需求，不需要 JS 就能让列表元素依次淡入，而且能适配任意数量的子元素。下面给你详细拆解实现方案：

核心思路 #

我们先给所有列表元素设置初始透明状态，然后通过 SASS 的 @for 循环，为每个第 i 个元素计算对应的动画延迟——第一个元素延迟 0 秒（页面加载即触发），第二个延迟 1 秒，第三个延迟 2 秒……以此类推，完美实现依次淡入的效果。

完整代码示例 #

首先定义几个可灵活调整的 SASS 变量，方便你后续修改动画时长、间隔和元素数量：

// 可自定义的变量
$fade-duration: 0.5s;    // 淡入动画的时长
$delay-interval: 1s;      // 元素之间的动画间隔
$item-count: 5;           // 列表元素的总数量，根据实际情况修改

// 基础样式
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  opacity: 0;             // 初始状态为透明
  animation: fadeIn $fade-duration ease-in-out forwards;
}

// 淡入动画关键帧
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

// SASS 循环：为每个元素设置对应的动画延迟
@for $i from 1 through $item-count {
  li:nth-child(#{$i}) {
    animation-delay: ($i - 1) * $delay-interval;
  }
}

适配任意数量的元素 #

如果你的列表元素数量有变化，只需要修改 $item-count 的值就行——比如有 10 个 <li>，就把 $item-count 设为 10，循环会自动为每个元素计算正确的延迟时间。

如果你的列表是动态生成的（比如从后端渲染），只要能把元素数量传递给 SASS 变量（比如通过模板引擎或者构建工具注入），这个方案同样适用。

补充说明 #

SASS 本身没办法直接读取 DOM 中的元素数量，所以需要提前知道元素总数或者能动态传递这个数值。不过既然你已经掌握了 JS 实现方式，这个纯 CSS+SASS 的方案刚好可以作为无 JS 场景的替代方案，性能更优，也更简洁。

内容的提问来源于stack exchange，提问作者Andrés Root