internet-explorer - 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) 之间转换/p>

@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);
  }
}