title: CSS3 - add class to fire an animation and remove class on completion
body: <p>I have a div and when I click it jquery adds a class which starts an animation running.  When the animation stops (after 3 seconds) I want the class to be removed, so that when the div is clicked on again the animation will start over.</p>
  
  <p>This is only testing and only Chrome browser at the moment.</p>
  
  <p>Here is my CSS3:</p>
  
  <pre><code>.spin360
  {
      -webkit-animation-name: spin;
      -webkit-animation-duration: 3s;
      -webkit-animation-iteration-count: 1;
      -webkit-animation-timing-function: ease;
      -webkit-animation-fill-mode: forwards;
  }
  
  @-webkit-keyframes spin 
  {
      0% { -webkit-transform: rotateX(0); }
      100%   { -webkit-transform: rotateX(-360deg); }
  }
  </code></pre>
  
  <p>Here is my script:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          $('#spinButton').click(function () {
              $('#shape').addClass('spin360');
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>Here is what I've tried:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          $('#spinButton').click(function () {
              $('#shape').addClass('spin360').on('webkitAnimationEnd', function () {
                  $('#shape').removeClass('spin360');
              });
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>And</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          $('#spinButton').click(function () {
              $('#shape').addClass('spin360');
          });
  
          $('#spinButton').addEventListener('webkitAnimationEnd', function (e) {
              $('#shape').removeClass('spin360');
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>In all cases - my animation runs on the first click, but not subsequent clicks.</p>