IE10打破了在Webkit＆amp ;;中工作的CSS3 3D动画。火狐

Question

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

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

请查看此jsFiddle中的问题（为清晰起见，仅限IE＆amp; Webkit）：http://jsfiddle.net/uJnHE/5/

Answer 1

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