title: Set CSS animation delay with javascript
body: <p>I have some keyframe animations in my css file. There is already an animation-delay specified.
  The wrapper div has the attribute data-delay.</p>
  
  <p>I want to get the animation-delay in the css file and add the value of data-delay to it.
  Then i want that the animation start with the new delay.</p>
  
  <p>I tried <code>ele[i].style.animationDelay</code>.
  But it seems that this returns null until I set a value to it.</p>
  
  <p>If I set <code>ele[i].style.animationDelay = '5s'</code> the animation still runs with the delay of the css file.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="wrapper" data-delay="2s" &gt;
      &lt;h1 id="hi"&gt;Hi&lt;/h1&gt;
      &lt;h1 id="name"&gt;test!&lt;/h1&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>body { font-size: 300%; }
  
  #wrapper h1 { position: absolute; }
  
  #hi {
      transform: translate(-200px, 100px);
  
      animation-name: hi;
      animation-duration: .5s;
      animation-timing-function: linear;
      animation-fill-mode: forwards;
      animation-delay: 0s;
  }
  
  #name {
      transform: translate(-200px, 150px);
  
      animation-name: name;
      animation-duration: .5s;
      animation-timing-function: linear;
      animation-fill-mode: forwards;
      animation-delay: 1s;
  }
  
  @keyframes hi{
      100% { transform: translate(50px, 100px) };
  }
  
  @keyframes name{
      100% { transform: translate(50px, 150px) };
  }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>var wrapper = document.getElementById('wrapper');
  var ele = wrapper.children;
  var delay = wrapper.getAttribute('data-delay');
  
  for (var i=0;i&lt;ele.length;i++) {
  
      alert(ele[i].style.animationDelay);
      ele[i].style.animationDelay = delay;
      alert(ele[i].style.animationDelay);
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/FHuKN/4/" rel="nofollow noreferrer">http://jsfiddle.net/FHuKN/4/</a></p>