Como reverter uma animação no mouse depois de passar o mouse

Então, é possível ter uma animação reversa no mouse, como:

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

mas, ao usar a animação @keyframes, não consegui fazê-lo funcionar, por exemplo:

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

Qual é a solução ideal, sabendo que eu precisaria de iterações e animação em si?

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

Eu acho que se você tiver um, você deve usar um. Eu pensaria em algo como:

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

Claro que deve ter verificado já, mas achei estranho que você use apenas a propriedade transform desde CSS3 não é totalmente implementado em todos os lugares. Talvez funcionasse melhor com as seguintes considerações:

  • O Chrome usa @-webkit-keyframes , nenhuma versão específica é necessária
  • O Safari usa @-webkit-keyframes desde a versão 5+
  • O Firefox usa @keyframes desde a versão 16 (v5-15 usou @-moz-keyframes )
  • O Opera usa a versão 15-22 do @-webkit-keyframes (somente a v12 usava @-o-keyframes )
  • O Internet Explorer usa @keyframes desde a versão 10+

EDITAR:

Eu inventei aquele violino:

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

Usando código mínimo. Está se aproximando do que você estava esperando?

É muito mais fácil do que tudo isso: basta fazer a transição da mesma propriedade em seu elemento

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

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

Eu não acho que isso é possível usando apenas animações CSS. Estou assumindo que as transições de CSS não atendem ao seu caso de uso, porque (por exemplo) você deseja encadear duas animações, usar várias paradas, iterações ou, de alguma outra forma, explorar as animações de energia adicionais que concedem a você.

Eu não encontrei nenhuma maneira de acionar uma animação CSS especificamente no mouse-out sem usar JavaScript para append classs “over” e “out”. Embora você possa usar a declaração CSS base, acionar uma animação quando o: hover terminar, essa mesma animação será executada no carregamento da página. Usando as classs “over” e “out” você pode dividir a definição na declaração base (load) e nas duas declarações de trigger de animação.

O CSS para esta solução seria:

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

E usando JavaScript (syntax jQuery) para ligar as classs aos events:

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

Você seria melhor ter apenas uma animação, mas reverter isso?

 animation-direction: reverse 

Tente isto:

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

suportado no Firefox 5+, IE 10+, Chrome, Safari 4+, Opera 12+