title: CSS animation onclick and reverse next onclick
body: <p>I am using a spritesheet and keyframes to animate the image on a button when it is clicked.</p>
  
  <p>When the button is clicked I want the frames to run in one direction and leave the button on the last image in the spritesheet, and when it is clicked again I want the same frames to run backwards, leaving the button on the first image on the spritesheet. </p>
  
  <p>I am currently trying to use jquery to change the class on the button to an animating class when it is clicked, but this doesn't seem to be working.</p>
  
  <p>fiddle: <a href="http://jsfiddle.net/CGmCe/10295/" rel="nofollow">http://jsfiddle.net/CGmCe/10295/</a></p>
  
  <p>JS:</p>
  
  <pre><code>function animate(){
      $('.hi').addClass('animate-hi');
  }
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.hi {
  width: 50px;
  height: 72px;
  background-image: url("http://s.cdpn.io/79/sprite-steps.png");
  }
  
  .animate-hi {
      animation: play 2s steps(10);
  }
  
  @keyframes play {
     from { background-position:    0px; }
       to { background-position: -500px; }
  }
  </code></pre>