Cómo revertir una animación en el mouse out después de pasar el mouse
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?