Disattiva l'animazione CSS3 con jQuery?

Question

Ho un oggetto che ha un'animazione quando la pagina viene caricata:

.logo-mark { 
     -webkit-animation: spin 2s 1 cubic-bezier(0.000, 0.000, 0.230, 1.000); 
      -moz-animation: spin 2s 1 cubic-bezier(0.000, 0.000, 0.230, 1.000); 
      -ms-animation: spin 2s 1 cubic-bezier(0.000, 0.000, 0.230, 1.000); 
      animation: spin 2s 1 cubic-bezier(0.000, 0.000, 0.230, 1.000); 
    } 

Ad un certo momento, voglio JavaScript per accendere un'animazione specifica che si verifica all'infinito, fino a quando si ferma JavaScript detto animazione. Così ho semplicemente creato un'altra classe chiamata .logo-loading, e in certi momenti, jQuery fa un addClass e un removeClass.

Tuttavia, quando JavaScript rimuove la classe, l'oggetto continua a ruotare indipendentemente da cosa. C'è qualcosa che posso fare qui?

Answer 1

Si può solo ignorare che le proprietà CSS con "nessuno" per ogni animazione

function stopAnimation(element) 
{ 
    $(element).css("-webkit-animation", "none"); 
    $(element).css("-moz-animation", "none"); 
    $(element).css("-ms-animation", "none"); 
    $(element).css("animation", "none"); 
} 

modo da poter smettere di animazione semplicemente chiamando questa funzione ...

Answer 2

questo funziona come ci si aspetta in Firefox, vede questo jsFiddle:

• http://jsfiddle.net/hNuSd/

Così ho modificato il vostro esempio (conservati solo -moz- quelli come è Firefox) per 1s cicli, io avviare la rotazione e quindi terminarla dopo 3,6 secondi. Funziona tutto bene, Firefox 11.0 su Xubuntu 11.10.

Se non si utilizza Firefox, si può provare in Firefox per confermare che (sia il proprio che il mio esempio) funzionano sul proprio computer? Potrebbe essere una "funzione" specifica del browser.

Answer 3

Se si desidera mettere in pausa un'animazione (e quindi riprendere dal punto in cui era stata interrotta) si potrebbe attivare è stato giocare con questa proprietà CSS:

.paused { 
    -ms-animation-play-state:paused; 
    -o-animation-play-state:paused; 
    -moz-animation-play-state:paused; 
    -webkit-animation-play-state:paused; 
    animation-play-state: paused; 
} 

è quindi possibile utilizzare jQuery per attivare la classe in pausa:

$("#animatedElement").click(function(e){ 
    $(e.currentTarget).toggleClass("paused"); 
}); 

Vedi questo esempio che in realtà mette in pausa senza javascript: http://jsfiddle.net/fRzwS/

E questo post su Forrst dal l'autore del violino: http://forrst.com/posts/How_To_Pause_CSS_Animations-0p7