Как обратить анимацию при наведении мыши после наведения ⇐ CSS

[Anonymous]

Итак, при наведении курсора мыши можно использовать обратную анимацию, например:

Код: Выделить всё

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

Каково оптимальное решение, зная, что мне потребуются итерации и сама анимация?

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

Подробнее здесь: https://stackoverflow.com/questions/165 ... fter-hover