Désactiver l'animation CSS3 avec jQuery?

J'ai un objet qui a une animation lorsque la page est chargée:

.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);
    }

À un certain moment, je veux JavaScript pour activer une animation spécifique qui se produit sans cesse, jusqu'à ce que le JavaScript s'arrête, a déclaré l'animation. J'ai donc tout simplement fait une autre classe nommée .logo de chargement, et à certains moments, jQuery fait un addClass et removeClass.

.logo-loading {
            -webkit-animation: spin 4s infinite linear;
                -moz-animation: spin 4s infinite linear;
                -ms-animation: spin 4s infinite linear;
                animation: spin 4s infinite linear;
        }

Toutefois, lorsque le JavaScript supprime la classe, l'objet ne cesse de rotation n'importe quoi. Est-ce que je peux faire ici?

source d'informationauteur John Shammas

  1. 15

    Vous pouvez simplement remplacer les propriétés CSS avec "aucun" pour chaque animation

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

    de sorte que vous pouvez arrêter l'animation tout simplement l'appel de cette fonction...

  2. 15

    Si vous souhaitez interrompre une animation (et puis reprendre à partir du point où elle a été interrompue), vous pouvez basculer c'est le jeu de l'état avec cette propriété 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;
}

    Vous pouvez ensuite utiliser jquery pour faire basculer la pause de classe:

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

    Voir cet exemple qui fait des pauses sans javascript:
    http://jsfiddle.net/fRzwS/

    Et ce post sur forrst du violon de l'auteur:
    http://forrst.com/posts/How_To_Pause_CSS_Animations-0p7

  3. 0

    Cela fonctionne comme vous le souhaitez dans Firefox, voir ce jsFiddle:

    J'ai donc modifié votre exemple (seulement conservé -moz- que c'est Firefox) à 1s cycles, j'ai commencer la filature et puis à la fin il après 3,6 s. Tout fonctionne très bien, Firefox 11.0 sur Xubuntu 11.10.

    Si vous n'utilisez pas Firefox, pouvez-vous essayer dans Firefox pour confirmer qu'ils (les deux de vous et de mes exemples) y travailler sur votre machine? Il pourrait s'agir d'un navigateur spécifique de la "fonctionnalité".