title: CSS3 Reset Animation Requires Timeout (if set animation from external style sheet)
body: <p>I have a CSS animation. I apply it to a span within my div element with class span. I apply it from an external style sheet:</p>
  
  <pre><code>.skill &gt; span { width:100%; -moz-animation:anim-skill 2s ease-out; -webkit-animation:anim-skill 2s ease-out; }
  
  .anim-skill {width:100%; animation:anim-skill 2s ease-out; -moz-animation:anim-skill 2s ease-out; -webkit-animation:anim-skill 2s ease-out; -o-animation:anim-skill 2s ease-out;}
  
  @keyframes anim-skill { from {width:0px;} to  {width:100%} }
  </code></pre>
  
  <p>When I want to reset the animation during run time I do this:</p>
  
  <pre><code>var mySkill = document.querySelector('.skill');
  var bar = mySkill.childNodes[0];
  //make it "from" state
  bar.style.animation = 'none';
  mySkill.style.width = 0;
  
  //make it run
  setTimeout(function () {
      mySkill.style.width = '';
      bar.style.animation = '';
  }, 20);
  </code></pre>
  
  <p>This is very hacky. Is there a way to reset the animation this without using setTimeout? Note: If my timeout is 10ms or less it doesnt work also.</p>