Как поменять анимацию при наведении мыши после наведения мыши
Таким образом, можно иметь обратную анимацию на мыши, такую как:
.class{
transform: rotate(0deg);
}
.class:hover{
transform: rotate(360deg);
}
но при использовании анимации @keyframes я не могзаставить его работать, например:
.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);}
}
Каково оптимальное решение, зная, что янужны итерации и сама анимация?