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 fazer isso 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?