title: How to properly stop an infinite CSS animation using webkitAnimationIteration event in javascript?
body: <p>I'm having trouble stoping a CSS animation on every iteration accurately.
  I Have a CSS animation that i want to play when i call a function and play it backwards again when i call another. For that i'm setting an infinite animation in CSS/javascript like this:</p>
  
  <pre><code>function setup(container, element){
     var elem = document.getElementById(container).getElementsByClassName(element)[0];
     elem.style.webkitAnimationName=elemento+"_move";
     elem.style.webkitAnimationDuration="350ms";
     elem.style.webkitAnimationPlayState = "paused";
     elem.style.webkitAnimationDirection="alternate";
     elem.style.webkitAnimationIterationCount = "infinite";
     elem.addEventListener("webkitAnimationIteration", pause, false);
  }
  </code></pre>
  
  <p>Notice that i'm setting an eventListener in the last line so that the animation pauses at every iteration using the fallowing function:</p>
  
  <pre><code>function pause(event){
      this.style.WebkitAnimationPlayState = "paused";
  }
  </code></pre>
  
  <p>The function works fine when i play the animation forward, but when i use another function to set the 'WebkitAnimationPlayState' as 'running' and play is backwards it stops out of place. like one frame out of the place. 
  Here is the function i use to put it back in motion:</p>
  
  <pre><code>function run(container, element){
      var elem = document.getElementById(container).getElementsByClassName(elemento)[0];
      elem.style.WebkitAnimationPlayState = "running";
  }
  </code></pre>
  
  <p>I don't know if it is one frame forward or backwards but avery time a try it the distance is different. I believe that the function pauses the animation a little before the real end of the iteration (Apple <a href="http://developer.apple.com/library/safari/#documentation/AudioVideo/Reference/WebKitAnimationEventClassReference/WebKitAnimationEvent/WebKitAnimationEvent.html" rel="nofollow">Documentations</a> says it would be at the end).</p>
  
  <p>Here is what i've done so far. 
    <a href="http://bitlock.com.br/arquivos/amima" rel="nofollow">DEMO</a></p>
  
  <p>You can notice that the right border of the frame don't come back to where is was before the animation.</p>
  
  <p>Anyone have a clue?
  Thanks </p>