IE10破坏了在Webkit和Firefox中正常工作的CSS3 3D动画

Question

我在两个

上有一个简单的水平CSS3 3D翻转效果，在Chrome，Safari和Firefox中运行良好。但是IE10会出现一些奇怪的额外动画，似乎在所有轴上都进行了动画。

我已经追踪到这是由于多余的translateX动画引起的。如果我将其删除并仅执行rotateY，IE10就会像其他浏览器一样运行。但我不想放弃x轴动画。

请在此jsFiddle中查看该问题（仅限IE和Webkit）：http://jsfiddle.net/uJnHE/5/

- samy-delux

Answer 1

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

- methodofaction

---

是的，你说得对。我已经在jsFiddle中纠正了错误，但是IE10的错误行为并没有改变。 - samy-delux

值得一试：在你的 0% 关键帧中添加 transform: rotateY(0) translateX(0)。问题可能在于 IE10 不知道如何在“未定义”和“translateX(-200px)”之间插值。 - methodofaction

好建议，解决了！爱死IE10了;-) http://jsfiddle.net/uJnHE/17/ - 请考虑将这个想法添加到您原始答案的顶部，这样我就可以接受它，其他人也可以立即找到有用的内容。 - samy-delux

希望在最终发布之前能够解决这个问题，因为它符合规范。 - methodofaction

不幸的是，我已经使用自 8月15日以来在MSDN上提供的发布版本进行了测试... - samy-delux

是的，在IE10最终版中仍然会发生这种情况。缓慢的鼓掌声。 - Steve