title: Problems toggling animation play state
body: <p>I'm trying to start/stop the rotate animation with a button. Not sure what I'm doing something wrong. I'd rather avoid JQuery if possible....I'm already in above my head.</p>
  
  <pre><code>&lt;head&gt;
  &lt;style type='text/css'&gt;
      #spinner {
      -webkit-animation: spin 2s linear infinite;
      -webkit-animation-play-state:running;
      border: 1px dashed;
      border-radius: 50%;
      width: 5em;
      height: 5em;
      margin: 2em auto;
      padding: 2em;
  }
  @-webkit-keyframes spin {
      from {
          -webkit-transform:rotate(0deg);
      }
      to {
          -webkit-transform:rotate(360deg);
      }
  }
    &lt;/style&gt;
  
  
  
  &lt;script type='text/javascript'&gt;//&lt;![CDATA[ 
  window.onload=function(){
  function spin() {
      var spinner = document.getElementById("spinner");
  
      if (spinner.style.webkitAnimationPlayState === 'running') {
          spinner.style.webkitAnimationPlayState = 'paused';
          document.body.className = 'paused';
      } else {
          spinner.style.webkitAnimationPlayState = 'running';
          document.body.className = '';
      }
  }
  }//]]&gt;  
  
  &lt;/script&gt;
  
  
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="spinner"&gt;spin!&lt;/div&gt;
  &lt;button onClick="spin();"&gt;start/stop&lt;/button&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/uc9c5/1/" rel="nofollow">http://jsfiddle.net/uc9c5/1/</a></p>
  
  <p>Thanks in advance</p>