无限数量元素的 CSS 顺序动画级联

Question

据我所知，获取级联动画的常用方法是:

.box {
    animation: someAnimation 3s linear 0s 1 normal none;
}

然后如果我想实现级联(顺序)效果:

.box:nth-child(1) {
    animation-delay: 0s;
}

.box:nth-child(2) {
    animation-delay: 0.5s;
}

.box:nth-child(3) {
    animation-delay: 1s;
}

etc...

通常，这可以使用 LESS 或 SASS 自动生成，通过一个 mixin 输出 N 个元素。

问题是:我如何在 CSS 中对无限数量的元素执行此操作？ 换句话说，如何在不为每个 child 指定延迟的情况下制作级联动画？

Answer 1

你可以使用 Sass 的数学属性:

fiddle here

通过变量指定nth-child，并在确定延迟时使用该变量。

@for $i from 1 through $total {
  .box:nth-child(#{$i}){
    -webkit-animation-delay: $i * 0.5s;
    animation-delay: $i * 0.5s - 0.5s;
  }
}

其中 $total 由 child 的数量定义。