web-dev-qa-db-fra.com

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

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

@-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;
}

En revanche, lorsque vous passez la souris sur l'animation, l'animation cesse brusquement pour revenir à 0 degré. J'aimerais revenir à cette position, mais j'ai du mal à comprendre la syntaxe.

Toute entrée serait géniale!

csscss3css-animations
57
Gavin

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

Regardez le violon que j'ai mis à jour depuis le vôtre: http://jsfiddle.net/DoubleYo/4Vz63/1648/

Cela fonctionne bien avec Firefox mais pas avec Chrome

.elem{
    position: absolute;
    top: 40px;
    left: 40px;
    width: 0; 
    height: 0;
    border-style: solid;
    border-width: 75px;
    border-color: red blue green orange;
    transition-property: transform;
    transition-duration: 1s;
}
.elem:hover {
    animation-name: rotate; 
    animation-duration: 2s; 
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes rotate {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
<div class="elem"></div>
79
Yoann

Voici une solution de travail simple:

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.elem:hover {
    -webkit-animation:spin 1.5s linear infinite;
    -moz-animation:spin 1.5s linear infinite;
    animation:spin 1.5s linear infinite;
}
16
luizfelippe

Solution JS compatible avec tous les navigateurs:

var e = document.getElementById('elem');
var spin = false;

var spinner = function(){
e.classList.toggle('running', spin);
if (spin) setTimeout(spinner, 2000);
}

e.onmouseover = function(){
spin = true;
spinner();
};

e.onmouseout = function(){
spin = false;
};
body { 
height:300px; 
}
#elem {
position:absolute;
top:20%;
left:20%;
width:0; 
height:0;
border-style: solid;
border-width: 75px;
border-color: red blue green orange;
border-radius: 75px;
}

#elem.running {
animation: spin 2s linear 0s infinite;
}

@keyframes spin { 
100% { transform: rotate(360deg); } 
}
<div id="elem"></div>
1
fsw

Cela a pris quelques essais, mais j’ai réussi à faire fonctionner votre jsFiddle (pour Webkit uniquement).

Il y a toujours un problème avec la vitesse d'animation lorsque l'utilisateur entre à nouveau dans la division.

Fondamentalement, définissez simplement la valeur de rotation actuelle sur une variable, puis effectuez des calculs sur cette valeur (pour la convertir en degrés), puis redéfinissez cette valeur sur l'élément lors du déplacement de la souris et entrez-la.

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

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

1
triq6

Voici une implémentation javascript qui fonctionne avec 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.

0
bendytree