title: How to Pause ALL CSS animations?
body: <p>How would I go about pausing all css animations in a document at start? I want to have a class on all the elements that contain css animations at start, ie: '.paused'. Then, using a call back in my js using jQuery, remove the class '.paused', then add a class to resume playing, ie: '.running'.</p>
  
  <p>Here is what I've got:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;li class="firstanimation paused"&gt;...&lt;/li&gt;
  &lt;li class="secondanimation paused"&gt;...&lt;/li&gt;
  &lt;li class="thirdanimation paused"&gt;...&lt;/li&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#slider li.paused {
      -webkit-animation-play-state: paused;
      -moz-animation-play-state: paused;
      -ms-animation-play-state: paused;
      -o-animation-play-state: paused;
      animation-play-state: paused;
  }
  #slider li.firstanimation {
      animation: cycle 25s linear infinite;-moz-animation:cycle 25s linear infinite;-webkit-animation:cycle 25s linear infinite;
  }
  #slider li.secondanimation {
      animation: cycletwo 25s linear infinite;-moz-animation:cycletwo 25s linear infinite;-webkit-animation:cycletwo 25s linear infinite;
  }
  #slider li.thirdanimation {
      animation: cyclethree 25s linear infinite;-moz-animation:cyclethree 25s linear infinite;-webkit-animation:cyclethree 25s linear infinite;
  }
  </code></pre>
  
  <p>So, my problem is that the "#slider li.paused" selector doesn't work. In Chrome, the inspector says the 'animation-play-state:paused;' is an invalid property value...? I dont get that because I also have this in my css and it works fine:</p>
  
  <pre><code>#slider:hover li, #slider:hover .progress-bar {
      -webkit-animation-play-state: paused;
      -moz-animation-play-state: paused;
      -ms-animation-play-state: paused;
      -o-animation-play-state: paused;
      animation-play-state: paused;
  }
  </code></pre>
  
  <p>So again, basically in a nutshell, how do I target all my animations with a class to have them all be paused? <a href="http://dev.w3.org/csswg/css-animations/#animation-shorthand-property" rel="nofollow">According to W3 docs</a>, animation-play-state: paused; "Applies To: all elements, ::before and ::after pseudo-elements." But it doesnt in my case. What do I have wrong?</p>
  
  <p>Your help is greatly appreciated.</p>
  
  <p>Thnx!</p>