IE10 breaks CSS3 3D animation working in Webkit & Firefox

Question

I have a simple horizontal CSS3 3D flip effect on two div that works fine in Chrome, Safari and Firefox. But IE10 spins it and makes some weird extra animations all over the axis, as it seems.

I tracked it to an additional translateX animation. If I remove it and do only rotateY , IE10 will behave just like other browsers. But I don’t want to abandon the x-axis animation.

Please take a look at the problem in this jsFiddle (only for IE and Webkit for clarity): http://jsfiddle.net/uJnHE/5/

Answer 1

Remove your webkit prefixes and add translateX(0) because IE10 beta does not know how to switch between unoccupied conversion 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); } }