How to reverse an animation on mouse out after hover

Question

I think that if you have a to, you must use a from.
I would think of something like :

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

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

Of course must have checked it already, but I found strange that you only use the transform property since CSS3 is not fully implemented everywhere. Maybe it would work better with the following considerations :

Chrome uses @-webkit-keyframes, no particuliar version needed
Safari uses @-webkit-keyframes since version 5+
Firefox uses @keyframes since version 16 (v5-15 used @-moz-keyframes)
Opera uses @-webkit-keyframes version 15-22 (only v12 used @-o-keyframes)
Internet Explorer uses @keyframes since version 10+

EDIT :

I came up with that fiddle :

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

Using minimal code. Is it approaching what you were expecting ?

Leave a Comment Cancel reply