internet-explorer - IE10 が Webkit と Firefox で動作する CSS3 3D アニメーションを壊す

Question

divChrome、Safari、および Firefox で正常に動作する 2 つの s に、単純な水平方向の CSS3 3D フリップ効果があります。しかし、IE10はそれを台無しにし、すべての軸で奇妙な追加のアニメーションを実行します。

translateX追加のアニメーションまで追跡しました。それを削除して のみを実行するとrotateY、IE10 は他のブラウザーと同じように動作します。しかし、x 軸のアニメーションを放棄したくありません。

このjsFiddleの問題を見てください（明確にするためにIEとWebkitのみ）：http://jsfiddle.net/uJnHE/5/

Answer 1

translateX(0)IE10ベータ版は、宣言されていない変換プロパティとの間で移行する方法を知らないため、Webkitプレフィックスを削除して追加します。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);
  }
}