title: add different animation delays for dynamically generated HTML tags
body: <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>