title: How can I start CSS3 Animations at a specific spot?
body: <p>I'm using CSS3 Animations, and I want to be able to move to a specific spot in the animation.  For instance, if the CSS looks like this (and pretend that I used all the proper prefixes):</p>
  
  <pre><code>@keyframes fade_in_out_anim {
    0% { opacity: 0; }
    25% { opacity: 1; }
    75% { opacity: 1; }
    100% { opacity: 0; }
  }
  #fade_in_out {
    animation: fade_in_out_anim 5s;
  }
  </code></pre>
  
  <p>then I would like to be able to stop the animation, and move it to the 50% mark.  I guess that the ideal JavaScript would look something like this:</p>
  
  <pre><code>var style = document.getElementById('fade_in_out').style;
  style.animationPlayState = 'paused';
  
  // Here comes the made up part...
  style.animation.moveTo('50%'); // Or alternately...
  style.animationPlayPosition = '50%';
  </code></pre>
  
  <p>Does anyone know of a way to make this happen (hopefully in Webkit)?</p>