Comment inverser une animation lors de la sortie de la souris après le survol d'un objet ?

Question

Il est donc possible d'avoir une animation inverse lors de la sortie de la souris, par exemple :

.class{
   transform: rotate(0deg);

}
.class:hover{
   transform: rotate(360deg);
}

mais, lorsque j'utilise l'animation @keyframes, je n'ai pas réussi à la faire fonctionner, par ex :

.class{
   animation-name: out;
   animation-duration:2s;

}
.class:hover{
   animation-name: in;
   animation-duration:5s;
   animation-iteration-count:infinite;

}
@keyframe in{
    to {transform: rotate(360deg);}
}

@keyframe out{
    to {transform: rotate(0deg);}
}

Quelle est la solution optimale, sachant que j'aurais besoin d'itérations et de l'animation elle-même ?

http://jsfiddle.net/khalednabil/eWzBm/

Answer 1

Serait-il préférable d'avoir une seule animation, mais inversée ?

animation-direction: reverse

Answer 2

L'utilisation de transform en combinaison avec transition fonctionne parfaitement pour moi :

.ani-grow {
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    -ms-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
}
.ani-grow:hover {
    transform: scale(1.01);
}

Answer 3

J'ai créé un CodePen avec un correctif uniquement en CSS et un autre avec 2 lignes de jQuery pour résoudre le problème de chargement sur la page. Continuez à lire pour comprendre les 2 solutions dans une version plus simple.

https://codepen.io/MateoStabio/pen/jOVvwrM

Si vous cherchez comment faire cela avec CSS uniquement, la réponse de Xaltar est simple, directe et constitue la bonne solution. Le seul inconvénient est que l'animation de la sortie de la souris sera jouée lors du chargement de la page. En effet, pour que cela fonctionne, vous devez définir le style de votre élément avec l'animation OUT et la balise :hover avec l'animation IN.

svg path{
    animation: animateLogoOut 1s;
}
svg:hover path{
    animation: animateLogoIn 1s;
}

@keyframes animateLogoIn {
    from {stroke-dashoffset: -510px;}
    to {stroke-dashoffset: 0px;}
}
@keyframes animateLogoOut {
    from {stroke-dashoffset: 0px;}
    to {stroke-dashoffset: -510px;}
}

Certaines personnes ont trouvé que cette solution était inutile car elle jouait sur le chargement de la page. Pour moi, c'était la solution parfaite. Mais j'ai fait un Codepen avec les deux solutions car j'en aurai probablement besoin dans un futur proche.

Si vous ne voulez pas de l'animation CSS au chargement de la page, vous devrez utiliser un tout petit script de JS qui ne stylise l'élément avec l'animation OUT qu'après le premier survol de l'élément. Nous ferons cela en ajoutant une classe de .wasHovered à l'élément et donne un style à la classe ajoutée avec l'animation OUT.

jQuery :

$("svg").mouseout(function() {
    $(this).addClass("wasHovered");
 });

CSS :

svg path{

}

svg.wasHovered path{
    animation: animateLogoOut 1s;
}

svg:hover path{
    animation: animateLogoIn 1s;
}

@keyframes animateLogoIn {
    from {stroke-dashoffset: -510px;}
    to {stroke-dashoffset: 0px;}
}
@keyframes animateLogoOut {
    from {stroke-dashoffset: 0px;}
    to {stroke-dashoffset: -510px;}
}

Et voilà ! Vous pouvez trouver tout cela et plus sur mon codepen montrant en détail les 2 options avec une animation de survol du logo SVG.

https://codepen.io/MateoStabio/pen/jOVvwrM

Answer 4

J'ai essayé plusieurs solutions ici, mais aucune n'a fonctionné parfaitement ; j'ai donc cherché un peu plus sur le web, et j'ai trouvé GSAP à l'adresse https://greensock.com/ (sous réserve de la licence, mais elle est plutôt permissive) ; une fois que vous avez référencé la lib ...

 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js"></script>

... vous pouvez y aller :

  var el = document.getElementById('divID');    

  // create a timeline for this element in paused state
  var tl = new TimelineMax({paused: true});

  // create your tween of the timeline in a variable
  tl
  .set(el,{willChange:"transform"})
  .to(el, 1, {transform:"rotate(60deg)", ease:Power1.easeInOut});

  // store the tween timeline in the javascript DOM node
  el.animation = tl;

  //create the event handler
  $(el).on("mouseenter",function(){
    //this.style.willChange = 'transform';
    this.animation.play();
  }).on("mouseleave",function(){
     //this.style.willChange = 'auto';
    this.animation.reverse();
  });

Et ça fonctionnera parfaitement.

Answer 5

Essayez ça :

@keyframe in {
from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframe out {
from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}

supporté par Firefox 5+, IE 10+, Chrome, Safari 4+, Opera 12+.