Continue CSS rotation de l'animation sur le vol stationnaire, animé retour à 0deg sur le vol stationnaire hors

J'ai un élément qui tourne lorsque vous passez la souris sur une durée indéterminée. Lorsque vous passez, 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;
}

Lorsque vous passez la souris, cependant, l'animation est brutalement interrompue, le retour à 0 degrés. J'aimerais animer retour à cette position, mais j'ai un peu de mal à travailler la syntaxe.

Toute entrée serait génial!

Pour être honnête, je ne pense pas que vous le pouvez. J'ai créé un jsFiddle de toute façon, donc si quelqu'un a une idée... jsfiddle.net/4Vz63/1
Merci pour le jsfiddle - perplexe, moi-même, il semble que cela devrait être possible avec des images clés, mais je ne suis pas du tout familier avec les CSS# animation syntaxes encore.
Je pense que vous pouvez obtenir l'effet inverse d'une animation uniquement à l'aide de l'-webkit-transition de la propriété et non pas avec l'-webkit-animation
Bien sûr, vous pouvez le faire en JS, mais pas en pur CSS. Aussi s'il vous plaît vérifier cette solution qui est assez proche de ce que vous voulez - jsfiddle.net/SebastianPataneMasuelli/nkEwQ/7

InformationsquelleAutor Gavin | 2011-11-03

78

La solution est de définir la valeur par défaut dans votre .elem.
Mais cette annimation fonctionner correctement avec -moz mais pas encore à mettre en webkit

Regarder le violon, j'ai mis à jour de la vôtre :
http://jsfiddle.net/DoubleYo/4Vz63/1648/

Il fonctionne très bien avec Firefox mais pas avec Chrome

CSS:
```
.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);}
}
```
HTML:
```
<div class="elem"></div>
```
- Grand violon mate ( ou fiffle 😉 )
- Je suis une complète cul pour quelque sorte de ne pas remarquer cette réponse. Un correctif dans FF est mieux que rien, peut être corrigée avec les JS de travailler dans google Chrome.
- Essayé jFiddle il Travaillait bien sur chrome et j'ai brusque de l'animation dans les FF. Ressemble si l'augmentation de l'animation de la durée puis la rotation fonctionne très bien. Quelque chose comme -moz-animation-duration: 6s (rien de magique 6s) 1,5 s est trop rapide pour les FF
- Un de mes fav tripoter de tous les temps, j'aime changer border-style
- Ce n'est pas de travail pour moi en Chrome 35. Il fonctionne (un peu) dans FF 30. Si je souris au-dessus, sortir, puis souris sur l'avant de réinitialiser à 0, il termine l'animation, puis saute pour démarrer la rotation infinie de l'animation.
- mis à jour le violon, la suppression -moz - prefix => caniuse.com/#feat=css-animation | jsfiddle.net/scheinercc/30sxLud3/2
- Bon et excellent exemple. merci
InformationsquelleAutor Yoann

Voici une simple solution de travail:

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

InformationsquelleAutor luizfelippe

1

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/

InformationsquelleAutor triq6

De la croix-navigateur compatible JS solution:

JS:

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

CSS:

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

HTML:

<div id="elem"></div>

InformationsquelleAutor fsw

Voici un javascript de mise en œuvre qui travaille 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.

InformationsquelleAutor bendytree

-1
```
<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 une chose très facile... déclarer une variable globale au début... et puis incrémenter la variable cependant beaucoup de j'aime, et de l'utilisation .css de jquery pour incrémenter.
- Merci, mais la question a été sur le CSS.
InformationsquelleAutor omar-ali
-2

Vous devriez déclenchement de l'animation de revenir une fois qu'il est terminé, w/javascript.
```
  $(".item").live("animationend webkitAnimationEnd", function(){
    $(this).removeClass('animate');
  });
```
- Ceci est incorrect. La question est basée sur CSS et il est, et a, d'ores et déjà possible avec CSS. D'où le downvote
InformationsquelleAutor chovy

Vous devez vous connecter pour publier un commentaire.