IE10 rompt les animations CSS3 3D fonctionnant dans Webkit & Firefox

Question

J'ai un simple effet CSS3 horizontal 3D sur deux div qui fonctionne bien dans Chrome, Safari et Firefox. Mais IE10 le vissera et fera d'étranges animations supplémentaires sur tous les axes.

Je l'ai suivi vers le bas à l'animation translateX supplémentaire. Si je le supprime et ne fais que le rotateY, IE10 se comporte comme les autres navigateurs. Mais je ne veux pas renoncer à l'animation de l'axe des x.

S'il vous plaît jeter un oeil à la question dans ce jsFiddle (seulement IE & Webkit pour plus de clarté): http://jsfiddle.net/uJnHE/5/

Answer 1

Retirez vos préfixes WebKit et ajoutez translateX(0), parce que bêta IE10 ne sait pas comment faire la transition entre un non déclaré transformer et 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); 
    } 
}