无限数量元素的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...

通常,这可以通过mixin自动使用LESS或SASS进行,该mixin为N个元素输出.

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

Answer 1

实际上，元素的数量总是有限的。真正的问题是您不知道您将拥有多少个盒子。

无论您有静态还是动态数量的盒子，如果数量足够，您应该（我认为您已经这样做了）以编程方式创建它们。您可以使用 PHP、JavaScript 或许多其他框架。以编程方式创建框后，只需使用 style 属性来指定创建元素时的延迟。

伪代码：

for(n = 0; n < numBox; ++n){
    echo "<div class = 'box' style = 'animation-delay: " + 0.5*n + "'>stuff</div>"; 
}