CSS实现未知数量列表的逐个渐入效果（无需jQuery）

我懂你的痛点——用nth-child一个个写延迟只能覆盖有限数量的列表项，想搞个能适配任意数量的纯CSS方案对吧？

首先得说清楚：纯CSS本身没有像JS那样的循环逻辑，但我们有几个变通方案能实现接近“任意数量”的效果：

方案1：用相邻兄弟选择器写足够多的规则（纯原生CSS） #

这个方法不用任何额外工具，就是写一系列相邻兄弟选择器来递增加动画延迟，足够覆盖大多数日常场景（比如写20条，一般列表不会这么长）。代码示例：

/* 定义渐入动画 */
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

.ladder {
  opacity: 0;
  animation: fadeIn 0.9s forwards;
  /* 第一个列表项的延迟 */
  animation-delay: 0.2s;
}

/* 第二个列表项延迟累加0.2s */
.ladder + .ladder {
  animation-delay: 0.4s;
}

/* 第三个列表项继续累加 */
.ladder + .ladder + .ladder {
  animation-delay: 0.6s;
}

/* 按需继续往下写，比如写到第20个 */
.ladder + .ladder + .ladder + .ladder {
  animation-delay: 0.8s;
}
/* ... 以此类推，直到你觉得足够覆盖需求的数量 */

这个方法的好处是纯原生CSS，不用额外编译步骤，缺点是没法真正做到“无限”，但日常业务场景完全够用。

方案2：用CSS预处理器（Sass/LESS）生成循环规则（编译后是纯CSS） #

如果能接受用预处理器（比如Sass），那就能真正实现适配任意数量的列表项，预处理器的@for循环会帮你自动生成所有nth-child的规则。

比如Sass代码：

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

.ladder {
  opacity: 0;
  animation: fadeIn 0.9s forwards;
}

// 循环生成1到50个元素的延迟（50可以改成你需要的任意数）
@for $i from 1 through 50 {
  .ladder:nth-child(#{$i}) {
    animation-delay: $i * 0.2s;
  }
}

编译后会自动生成从.ladder:nth-child(1)到.ladder:nth-child(50)的所有规则，完美适配任意数量（只要你设置的循环次数足够大）。

为什么纯CSS没法真正做到“无限”？ #

因为原生CSS没有变量循环或动态获取子元素索引的能力——它没法自动识别每个列表项的位置序号并计算对应的延迟。上面的方案都是在现有CSS能力范围内的最优解啦。

内容的提问来源于stack exchange，提问作者Squish