3

このJSFiddleには、Chrome、Firefox、Safariで機能するCSSアニメーションが含まれていますが、IE 10では機能しません。IE10 にはプレフィックスが必要-ms-ないので、それはできません。私はこれで何も悪いことを見ることができません：

@keyframes snapVertical {
  0% { background-position: 0 0; }
  16% { background-position: 0 0; }
  21% { background-position: 0 -136px; }
  37% { background-position: 0 -136px; }
  42% { background-position: 0 -272px; }
  58% { background-position: 0 -272px; }
  63% { background-position: 0 -136px; }
  79% { background-position: 0 -136px; }
  84% { background-position: 0 0; }
  100% { background-position: 0 0; }
}
.animation-snap-vertical {
  animation: snapVertical 4s cubic-bezier(0.165, 0.840, 0.440, 1.000) 0s infinite;
}

これがIE10で機能しないのはなぜですか？

編集

なぜ水平のものは機能するが、垂直（フィドル）は機能しないのですか？

水平方向のアニメーション：

@keyframes snapHorizontal {
  0% { background-position: 0 0; }
  16% { background-position: 0 0; }
  21% { background-position: -176px 0; }
  37% { background-position: -176px 0; }
  42% { background-position: -352px 0; }
  58% { background-position: -352px 0; }
  63% { background-position: -176px 0; }
  79% { background-position: -176px 0;}
  84% { background-position: 0 0; }
  100% { background-position: 0 0; }
}
.animation-snap-horizontal {
  animation: snapHorizontal 4s cubic-bezier(0.165, 0.840, 0.440, 1.000) 0s infinite;
}
4

1 に答える 1

4

IE のバグのようです (同様の SO の質問を参照してください)。これを回避するために、最初と最後のオフセットを 0 ではなく 0.1px に変更しました。これで問題は解決したようです。ソリューション コード ( jsfiddle ):

@keyframes snapVertical {
  0% { background-position: 0 0.1px; }
  16% { background-position: 0 0.1px; }
  21% { background-position: 0 -136px; }
  37% { background-position: 0 -136px; }
  42% { background-position: 0 -272px; }
  58% { background-position: 0 -272px; }
  63% { background-position: 0 -136px; }
  79% { background-position: 0 -136px; }
  84% { background-position: 0 0.1px; }
  100% { background-position: 0 0.1px; }
}
.animation-snap-vertical {
  animation: snapVertical 4s cubic-bezier(0.165, 0.840, 0.440, 1.000) 0s infinite;
}
于 2013-03-07T20:43:40.237 に答える