Question

I have a simple horizontal CSS3 3D flip effect on two divs which runs fine in Chrome, Safari and Firefox. But IE10 screws it up and does some strange additional animations on all axis as it seems.

I’ve tracked it down to the additional translateX animation. If I remove it and only do the rotateY, IE10 behaves just like the other browsers. But I don’t want to renounce the x-axis animation.

Please have a look at the issue in this jsFiddle (only IE & Webkit for clarity): http://jsfiddle.net/uJnHE/5/

Answer 1

Remove your webkit prefixes and add translateX(0), because IE10 beta doesn’t know how to transition between an undeclared transform propery and translateX(-200px)

@keyframes flipHotelInfoLeft {
  0% {
      animation-timing-function: ease-in;
      transform: rotateY(180deg) translateX(0);
  }
  50% {
      transform: rotateY(90deg) translateX(200px);
  }
  100% {
      animation-timing-function: ease-out;
      transform: rotateY(0) translateX(0);
  }
}