9

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?

Ampersand
  • 426
  • 1
  • 6
  • 12

1 Answers1

18

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);
});
Starx
  • 77,474
  • 47
  • 185
  • 261
  • Aha! Thanks for that. I was trying to figure out how to use setTimeout properly because when I was using it nothing would happen. – Ampersand Apr 28 '12 at 07:36