CSS3 transition of animation works on FF but not on Chrome, why?

Question

On Firefox, when I mouseover the element the element runs the css3 animation and on mouse out the animation is reverted:

http://jsbin.com/bapen/2/watch

With the same code base, with all the webkit vendor prefixes, I don't have the same effect. So, when mouseover the element rotates but on mouseout it doesn't rotate the other way back to the initial state.

Firefox behaves in a nicer way and I guess, this is not supported on Chrome ?

The reason I've mentioned "transition of animation", it's that when testing, the property transition: all 0.45s, is what makes this work like it does on FF.

Not sure if someone more experienced can give some hints ? Thanks!

Answer 1

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.