title: run/pause CSS animation with jQuery
body: <p>I would like to start with a paused CSS animation then use jQuery to run the animation for a second before pausing again.</p>
  
  <p>The css is below:</p>
  
  <pre><code>#animation {
    -webkit-animation: one 5s infinite;
    -webkit-animation-play-state: paused;
  }
  
  @-webkit-keyframes one {
    0% { .... }
    .....
    100% { .... }
  }
  </code></pre>
  
  <p>It has some complicated keyframes and the aim is that it would play for 1 second to the 20% position then stop.</p>
  
  <p>I tried the jQuery below but it didn't work:</p>
  
  <pre><code> $("#click").click(function(){
       $("#animation").css("-webkit-animation-play-state", "running").delay(1000).css("-webkit-animation-play-state", "paused");          
   });
  </code></pre>
  
  <p>(#click is the div I want to use as the trigger for the animation)</p>
  
  <p>If I remove the delay and subsequent pause it works fine but obviously continues looping.</p>
  
  <p>eg:</p>
  
  <pre><code> $("#click").click(function(){
       $("#animation").css("-webkit-animation-play-state", "running");            
   });
  </code></pre>
  
  <p>What would you fine people suggest?</p>