title: Is it possible to use the nth-child value as a parameter in a property? (and how)
body: <h2>Short description (tl;dr;)</h2>
  
  <p>Is there a "pure CSS" way (not Less/Sass) of using the value of the <code>nth-child</code> inside the CSS properties? Something like this:</p>
  
  <pre><code>span.anim:nth-child(N) { animation-delay: N * 0.5s; }
  </code></pre>
  
  <p>If there is, how can I do it? If there is not, how could I mimic it in a clean way? (I'm sure that I'm over-complicating things here)</p>
  
  <hr>
  
  <h2>Long description</h2>
  
  <p>I was creating a simple animation in which letters fade in while rotating. For that, I was using a combination of javascript (with jQuery) and CSS, but that created some problems (see below); so I tried to move to a CSS-only solution, and that ended in a large amount of rules.</p>
  
  <p>This (simplified) CSS is common to both solutions:</p>
  
  <pre><code>span.anim {
      font-size:30px;
      opacity:0;
      animation: anim 1s;
      animation-fill-mode: forwards;
  }
  
  @keyframes anim {
      from {
          transform: rotate(0deg);
          opacity:0;
      }
      to {
          transform: rotate(360deg);
          opacity:1;
      }
  }
  </code></pre>
  
  <p><strong>Using JavaScript + CSS</strong></p>
  
  <p>My JavaScript code looks like this:</p>
  
  <pre><code>var aux = $("#animate").text();
  $("#animate").text("");
  
  for (var x = 0; x &lt; aux.length; x++) {
      setTimeout('$("#animate").append("&lt;span class=\'anim\'&gt;' + aux[x] + '&lt;/span&gt;")', 500 * x);
  }
  </code></pre>
  
  <p>This works great... unless the user moves to a different tab, then the animation messes up, and the result is unexpected. You can see it on this JSFiddle: <a href="http://jsfiddle.net/e7b9ygk4/" rel="noreferrer">http://jsfiddle.net/e7b9ygk4/</a> (run the script, move to a different tab, and go back after a few seconds).</p>
  
  <p><strong>Using only CSS</strong></p>
  
  <p>I can achieve the same effect by breaking the element in smaller elements (this is the part I feel I'm over-complicating), and then applying the animation to each element with a different delay:</p>
  
  <pre><code>span.anim:nth-child(1) { -webkit-animation-delay:0.5s; }
  span.anim:nth-child(2) { -webkit-animation-delay:1.0s; }
  span.anim:nth-child(3) { -webkit-animation-delay:1.5s; }
  span.anim:nth-child(4) { -webkit-animation-delay:2.0s; }
  span.anim:nth-child(5) { -webkit-animation-delay:2.5s; }
  span.anim:nth-child(6) { -webkit-animation-delay:3.0s; }
  span.anim:nth-child(7) { -webkit-animation-delay:3.5s; }
  span.anim:nth-child(8) { -webkit-animation-delay:4.0s; }
  span.anim:nth-child(9) { -webkit-animation-delay:4.5s; }
  span.anim:nth-child(10) { -webkit-animation-delay:5.0s; }
  span.anim:nth-child(11) { -webkit-animation-delay:5.5s; }
  span.anim:nth-child(12) { -webkit-animation-delay:6.0s; }
  span.anim:nth-child(13) { -webkit-animation-delay:6.5s; }
  span.anim:nth-child(14) { -webkit-animation-delay:7.0s; }
  span.anim:nth-child(15) { -webkit-animation-delay:7.5s; }
  span.anim:nth-child(16) { -webkit-animation-delay:8.0s; }
  </code></pre>
  
  <p>This works great, even if the user moves to a different tab, but it results in a lot of <em>unnecessary</em> code (both HTML and CSS, although it could be simplified using JavaScript). You can see it working on this JSFiddle: <a href="http://jsfiddle.net/f5my3sm1/" rel="noreferrer">http://jsfiddle.net/f5my3sm1/</a>.</p>
  
  <p>My gut tells me that this could be achieved using Sass/Less, but I want to know if there is a simple "pure CSS" way of doing this, something that could be achieved (hopefully) with a single rule like:</p>
  
  <pre><code>span.anim:nth-child(N) { animation-delay: N * 0.5s; }
  </code></pre>