add different animation delays for dynamically generated HTML tags
<p>I have an HTML page which can generate any number of <code>&lt;div&gt;&lt;/div&gt;</code> tags.</p>

<p>I want to add different animation delays to each <code>div</code>, for example :</p>

<p>For an HTML structure : </p>

<pre><code>&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
</code></pre>

<p>the CSS is </p>

<pre><code>div:nth-child(1) {
    animation-delay: 1s;
}

div:nth-child(2) {
    animation-delay: 2s;
}

div:nth-child(3) {
    animation-delay: 3s;
}

div:nth-child(4) {
    animation-delay: 4s;
}
</code></pre>

<p>Now without the help of Javascript, does CSS provide any function that will make it easier to do the same for any random number of <code>div</code>?</p>

<p>I'm avoiding jQuery because the performance of <code>each()</code> is very poor.</p>

<p>Or are there any pure CSS alternatives to delay animation when the upper bound on the number of generated elements is unknown?</p>