Animation de rotation CSS continue au survol, animée à 0deg au survol

Question

J'ai un élément qui tourne lorsque vous le survolez indéfiniment. Lorsque vous survolez, l'animation s'arrête. Facile:

 @-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
    }
    to { 
        -webkit-transform: rotate(360deg);
    }
}

.elem:hover {
    -webkit-animation-name: rotate; 
    -webkit-animation-duration: 1.5s; 
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}
 

Cependant, lorsque vous survolez, l'animation cesse brusquement, revenant à 0 degré. J'aimerais revenir à cette position, mais j'ai du mal à trouver la syntaxe.

Toute entrée serait géniale!

Answer 1

La solution consiste à définir la valeur par défaut dans votre .elem. Mais cette annimation fonctionne bien avec -moz mais pas encore implémentée dans -webkit

Regardez le violon que j'ai mis à jour depuis le vôtre: http://jsfiddle.net/DoubleYo/4Vz63/5/ - Fonctionne bien avec Firefox mais pas avec Chrome

 .elem{
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 1s;

    -moz-transition-property: -moz-transform;
    -moz-transition-duration: 1s;
}
.elem:hover {
    -webkit-animation-name: rotate; 
    -webkit-animation-duration: 2s; 
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;

    -moz-animation-name: rotate; 
    -moz-animation-duration: 2s; 
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
}
@-webkit-keyframes rotate {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}

@-moz-keyframes rotate {
    from {-moz-transform: rotate(0deg);}
    to {-moz-transform: rotate(360deg);}
}
 

Answer 2

Il a fallu quelques essais, mais j'ai été en mesure d'obtenir votre jsFiddle de travail (pour Webkit seulement).

Il y a toujours un problème avec la vitesse de l'animation lorsque l'utilisateur rentre dans le div.

Fondamentalement, il suffit de régler la rotation actuelle de la valeur à une variable, puis faire quelques calculs sur cette valeur (pour convertir en degrés), puis définissez la valeur de retour de l'élément de déplacement de la souris et de la souris à l'entrée.

Découvrez le jsFiddle: http://jsfiddle.net/4Vz63/46/

Consultez cet article pour plus d'informations, y compris comment ajouter de la croix-compatibilité avec les navigateurs: http://css-tricks.com/get-value-of-css-rotation-through-javascript/

Answer 3

Voici une implémentation javascript qui fonctionne avec le web-kit:

 var isHovering = false;

var el = $(".elem").mouseover(function(){
    isHovering = true;
    spin();
}).mouseout(function(){
    isHovering = false;
});

var spin = function(){
    if(isHovering){
        el.removeClass("spin");

        setTimeout(function(){
            el.addClass("spin");

            setTimeout(spin, 1500);
        }, 0);
    }
};
spin();
 

JSFiddle: http://jsfiddle.net/4Vz63/161/

Barf.

Answer 4

 <script>
var deg = 0

function rotate(id)
{
    deg = deg+45;
    var txt = 'rotate('+deg+'deg)';
    $('#'+id).css('-webkit-transform',txt);
}
</script>
 

Ce que je fais est quelque chose de très facile ... déclarer une variable globale au début ... puis incrémenter la variable comme je l'aime et utiliser .css de jquery pour incrémenter.

Answer 5

Vous devez déclencher l'animation pour revenir une fois qu'elle est terminée avec javascript.

   $(".item").live("animationend webkitAnimationEnd", function(){
    $(this).removeClass('animate');
  });