run/pause CSS animation with jQuery

Question

I would like to start with a paused CSS animation then use jQuery to run the animation for a second before pausing again.

The css is below:

#animation {
  -webkit-animation: one 5s infinite;
  -webkit-animation-play-state: paused;
}

@-webkit-keyframes one {
  0% { .... }
  .....
  100% { .... }
}

It has some complicated keyframes and the aim is that it would play for 1 second to the 20% position then stop.

I tried the jQuery below but it didn't work:

 $("#click").click(function(){
     $("#animation").css("-webkit-animation-play-state", "running").delay(1000).css("-webkit-animation-play-state", "paused");          
 });

(#click is the div I want to use as the trigger for the animation)

If I remove the delay and subsequent pause it works fine but obviously continues looping.

eg:

 $("#click").click(function(){
     $("#animation").css("-webkit-animation-play-state", "running");            
 });

What would you fine people suggest?

Solution

jQuery delay() does not function when you are manipulating the css property. Use setTimeOut() instead

$("#click").click(function(){
     $("#animation").css("-webkit-animation-play-state", "running");
     setTimeout(function() { 
       $("#animation").css("-webkit-animation-play-state", "paused");
     }, 1000);
});

Comments

[Ampersand]

Aha! Thanks for that. I was trying to figure out how to use setTimeout properly because when I was using it nothing would happen.