为什么这个 CSS 动画在 IE10 中不起作用？答案

【问题标题】：Why doesn't this CSS animation work in IE10?为什么这个 CSS 动画在 IE10 中不起作用？
【发布时间】：2013-03-08 04:43:40
【问题描述】：

This JSFiddle 包含一个 CSS 动画，适用于我在 Chrome、Firefox 和 Safari 中，但不适用于 IE 10。我知道 IE 10 doesn't need -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;
}

为什么这在 IE 10 中不起作用？

编辑

为什么水平的可以工作，而垂直的 (fiddle) 不行？

水平动画：

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

【问题讨论】：

标签： css internet-explorer-10 css-animations

【解决方案1】：

它看起来像 IE 中的一个错误（请参阅similar SO question）。为了解决这个问题，我只是将初始偏移量和最终偏移量更改为 0.1px 而不是 0。这似乎已经解决了问题。解决方案代码（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;
}

【讨论】：