title: CSS3 animation-fill-mode: forwards
body: <p>Just using Google Chrome at the moment.</p>
  
  <p>I thought that adding <code>-webkit-animation-fill-mode: forwards;</code> would persist the end state of an animation.</p>
  
  <p>See <a href="http://jsfiddle.net/BYfDZ/14/" rel="nofollow">example here</a>.</p>
  
  <p>Why isn't the image staying at -180 degrees?</p>
  
  <p>EDIT:
  I want the animation to be able to run again, with things as they are at the end of the last animation.  This is a simplified version of the problem - the actual problem rotates 15 degrees, and I want the image to be rotated a further 15 degrees on each run. If I don't remove the class the 2nd click of the button does not do anything.</p>
  
  <p>CSS:</p>
  
  <pre><code>.flip180 {
      -webkit-animation-name: flip180;
      -webkit-animation-duration: 0.5s;
      -webkit-animation-iteration-count: 1;
      -webkit-animation-fill-mode: forwards;
  }
  
  @-webkit-keyframes flip180 {
      from { -webkit-transform: rotateX(0); }
      to   { -webkit-transform: rotateX(-180deg); }
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;button id="flipButton"&gt;Flip&lt;/button&gt;
  
  &lt;img id="shape" src="http://media.creativebloq.futurecdn.net/sites/creativebloq.com/files/articles/article/2012/07/darth.jpg"&gt;​
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>$(document).ready(function() {
      $('#flipButton').click(function() {
          $('#shape').addClass('flip180').on('webkitAnimationEnd', function() {
              $('#shape').removeClass('flip180');
          });
      });
  });​
  </code></pre>