title: Removing animation in Firefox reverses but in webkit it snaps back to start
body: <p><strong>Why does Firefox reverse an animation back to the start if you remove it whereas webkit snaps it back to the start position? Is there a difference in how they handle this?</strong></p>
  
  <p>I have an animation that flips an image of a record sleeve downwards towards the viewer (in 3D). The idea is to simulate flipping through records.</p>
  
  <p>As the first image flips down you can see the back image appear and also reveal the next image behind it. </p>
  
  <p>It uses fill-mode forwards to stop the animation at the end and there is a callback listener set up which I use to update the 'front' image' because, thanks to backface-visibility, at this point it's hidden. It's actually updated to be the image that was revealed behind so that once it returns to the start point it will be come the next image to flip down.
  Once that's done I use <code>document.getElementById('flip_rec').className='';</code> to remove the animation. This returns the animation to the start point and makes it ready to restart it next time. I then update the now hidden reverse and behind images and set a flag to allow the animation to run again.</p>
  
  <p>All that is important because when I remove the image in webkit it snaps the animation back to the start instantly - which works great because you don't notice the fact that the images have been replaced - but with Firefox it reverses the animation. So you see the image flipping backwards, revealing the new front image gradually and allowing you to see the behind image updating. The effect is ruined. </p>
  
  <p>This is the CSS I'm using to set the animation up. </p>
  
  <pre><code>.flip1
  {
  -webkit-animation-name: mymove1;
     -moz-animation-name: mymove1;
          animation-name: mymove1;
  -webkit-animation-duration: 1s;
     -moz-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-timing-function: linear;
     -moz-animation-timing-function: linear;
         -animation-timing-function: linear;
       /*don't go back to that start! Yet.*/  
  -webkit-animation-fill-mode: forwards; 
     -moz-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  }
  </code></pre>