esegui/interrompi animazione CSS con jQuery

Question

Vorrei iniziare con un'animazione CSS in pausa quindi utilizzare jQuery per eseguire l'animazione per un secondo prima di sospendere nuovamente.

Il css è inferiore:

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

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

Ha alcuni fotogrammi chiave complicati e lo scopo è che avrebbe giocato per 1 secondo alla posizione 20% poi fermarsi.

Ho provato il jQuery sotto, ma non ha funzionato:

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

(#click è il div voglio usare come trigger per l'animazione)

Se rimuovo il ritardo e pausa successiva funziona bene ma ovviamente continua il ciclo.

esempio:

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

Che cosa brava gente suggerire?

Answer 1

jQuery delay() non funziona quando si modifica la proprietà css. Utilizzare setTimeOut() invece

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