After playing with it for a while, it seems that Chrome doesn't automatically reverse keyframe animations. I don't know if there's some option to enable that or anything, but if you specify the transforms directly in the :hover
css rule, it seems to work consistently across Chrome and Firefox, i.e. change this:
@keyframes rotateMe {
0% {
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes rotateMe {
. . .
}
.rotateMe:hover {
animation-name: rotateMe;
-webkit-animation-name: rotateMe;
}
to this:
.rotateMe:hover {
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
Then the desired reversal effect seems to work, at least it did for me. In this case it's also less code, but obviously if your real goal is something requires keyframe animations, this solution won't work.
Also I should note, for clarity, that in the original Chrome did return to the initial state (which happened to look just like the final state), it's just that it did it immediately, rather than going backwards through the animation. You can verify this by ending at a rotation that's not a multiple of 90 degrees. Similarly if you change the background color in the :hover
rule you'll see that it smoothly transitions in both directions.