ejecutar/pausar animación CSS con jQuery

Question

Me gustaría comenzar con una animación CSS en pausa y luego usar jQuery para ejecutar la animación por un segundo antes de volver a pausar.

El CSS es a continuación:

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

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

Tiene algunos fotogramas clave complicados y el objetivo es que jugaría para 1 segundo a la posición de 20% y luego se detiene.

He probado el jQuery a continuación, pero no funcionó:

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

(#click es el div que quiero usar como disparador para la animación)

Si quito el retraso y pausa subsiguiente funciona bien, pero obviamente continúa en bucle.

por ejemplo:

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

¿Qué le sugeriría buena gente?

Answer 1

jQuery delay() no funciona cuando se está manipulando la propiedad css. Use setTimeOut() en su lugar

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