CSS sequential animation cascade for infinite number of elements

Question

The usual approach to obtain a cascading animation, as far as I know, is:

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

And then if I want to achieve a cascade (sequential) effect:

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

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

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

etc...

Usually, this can be automatically made with LESS or SASS via a mixin that outputs this for N elements.

The question is: How can I do this in CSS for an infinite amount of elements? In other words, how can I make a cascading animation without specifying the delay for each child?

Answer 1

Practically speaking, you will always have a finite number of elements. The real issue is that you don't know how many boxes you will have.

Whether you have a static or dynamic amount of boxes, you should (and I think you already are)programmatically create them if the amount is sufficient. You can use PHP, or javascript, or many other frameworks. Once you are programmatically creating the boxes, just use the style attribute to specify the delay as you create the element.

Pseudocode:

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