Cómo revertir una animación en el mouse después de colocar el mouse sobre ella

Por lo tanto, es posible tener una animación inversa en el mouse, como:

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

pero, al usar la animación @keyframes, no pude hacer que funcionara, por ejemplo:

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

¿Cuál es la solución óptima, sabiendo que necesitaría iteraciones y animación en sí?

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

Creo que si tienes que to , debes usar un from . Pensaría en algo como:

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

Por supuesto, debe haberlo comprobado, pero me parece extraño que solo use la propiedad de transform ya que CSS3 no se implementa completamente en todas partes. Tal vez funcionaría mejor con las siguientes consideraciones:

  • Chrome usa @-webkit-keyframes , no se necesita una versión en particular
  • Safari usa @-webkit-keyframes desde la versión 5+
  • Firefox usa @keyframes desde la versión 16 (v5-15 usó @-moz-keyframes )
  • Opera usa @-webkit-keyframes versión 15-22 (solo v12 usó @-o-keyframes )
  • Internet Explorer usa @keyframes desde la versión 10+

EDITAR:

Vine con ese violín:

http://jsfiddle.net/JjHNG/35/

Usando código mínimo. ¿Se está acercando a lo que esperabas?

Es mucho más fácil que todo esto: simplemente haga la transición de la misma propiedad en su elemento

 .earth { width: 0.92%; transition: width 1s; } .earth:hover { width: 50%; transition: width 1s; } 

https://codepen.io/lafland/pen/MoEaoG

No creo que esto se pueda lograr usando solo animaciones CSS. Supongo que las transiciones CSS no cumplen con su caso de uso, porque (por ejemplo) desea encadenar dos animaciones juntas, usar paradas múltiples, iteraciones, o de alguna otra manera explotar las animaciones de poder adicionales que le otorguen.

No he encontrado ninguna manera de desencadenar una animación CSS específicamente en la salida del mouse sin usar JavaScript para adjuntar clases “sobre” y “fuera”. Aunque puede usar la statement CSS base, desencadenar una animación cuando finaliza: el elemento emergente termina, esa misma animación se ejecutará en la carga de la página. Usando las clases “sobre” y “fuera” puede dividir la definición en la statement base (carga) y las dos declaraciones de activación de animación.

El CSS para esta solución sería:

 .class { /* base element declaration */ } .class.out { animation-name: out; animation-duration:2s; } .class.over { animation-name: in; animation-duration:5s; animation-iteration-count:infinite; } @keyframes in { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes out { from { transform: rotate(360deg); } to { transform: rotate(0deg); } } 

Y usando JavaScript (syntax jQuery) para vincular las clases a los eventos:

 $(".class").hover( function () { $(this).removeClass('out').addClass('over'); }, function () { $(this).removeClass('over').addClass('out'); } ); 

¿Sería mejor tener solo una animación, pero tenerla revertida?

 animation-direction: reverse 

Prueba esto:

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

Compatible con Firefox 5+, IE 10+, Chrome, Safari 4+, Opera 12+