IE10在Webkit和Firefox中打破CSS3 3D動畫

Question

在Chrome，Safari和Firefox中運行良好的兩個div中，我有一個簡單的水平CSS3 3D翻轉效果。但IE10將其固定起來，並在所有軸上執行一些奇怪的附加動畫。

我跟蹤它到另外translateX動畫。如果我將其刪除並僅執行rotateY，則IE10的行爲與其他瀏覽器類似。但我不想放棄x軸動畫。

請在此的jsfiddle（僅限IE &的Webkit爲清楚起見），看看問題：http://jsfiddle.net/uJnHE/5/

Answer 1

刪除您的webkit前綴，並添加translateX(0)，因爲IE10測試版不知道如何不宣之間轉變轉化propery和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); 
    } 
}