title: Using CSS attr() function and data-tags for animation timings
body: <p>I'm wondering wether I can combine data-tags with animations in CSS. I have a list of an undefined amount of items which are rendered by a javascript templating engine. As soon as the JS finished rendering them I would like to fade them in one after another without having to write a huge bunch of CSS selectors. This was my initial thought, when i only had about 6 elements been added dynamically. Due to the fact that it might get an undefined amount and should still look good I'm facing the described problem.</p>
  
  <p>Is this possible? How do i need to write my CSS?</p>
  
  <pre><code>li.shown {
      -webkit-animation: animateIn .8s forwards;
      -moz-animation: animateIn .8s forwards;
      animation: animateIn .8s forwards;
      -webkit-transition-delay: 0;
      -moz-transition-delay: 0;
      transition-delay: 0;
      -webkit-transition-delay: attr(data-animation-offset ms);
      -moz-transition-delay: attr(data-animation-offset ms);
      transition-delay: attr(data-animation-offset ms);
  }
  </code></pre>
  
  <p>My listitems might look like this and the data tag is calculated by js: </p>
  
  <pre><code>&lt;li data-animation-offset="2000" class="shown"&gt;&lt;/li&gt;
  </code></pre>
  
  <p>Ofcourse the easiest solution is using the good old style tag, but the coolest one might be the css version. </p>
  
  <p>Thanks in advance</p>