IE10打破了Webkit和Firefox中的CSS3 3D动画

Question

我在两个div上有一个简单的水平CSS3 3D翻转效果，在Chrome，Safari和Firefox中运行良好。 但IE10将其搞砸，并在所有轴上做了一些奇怪的额外动画。

我已将其追溯到额外的translateX动画。 如果我删除它并且只执行rotateY ，IE10就像其他浏览器一样。 但我不想放弃x轴动画。

请看一下这个jsFiddle中的问题（为了清楚起见，只有IE和Webkit）： http ： //jsfiddle.net/uJnHE/5/

Answer 1

删除你的webkit前缀并添加translateX(0) ，因为IE10 beta不知道如何在未声明的变换translateX(-200px)和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);
  }
}