为什么这个CSS动画在IE10中工作？ [英] Why doesn't this CSS animation work in IE10?

问题描述

这个JSFiddle 包含一个CSS动画，适用于Chrome，Firefox和Safari，但不适用于IE 10 。我知道IE 10 不 需要 -ms - 前缀，所以不能是它。我看不到任何错误：

This JSFiddle contains a CSS animation that works for me in Chrome, Firefox and Safari, but not IE 10. I know IE 10 doesn't need the -ms- prefix, so that can't be it. I can't see anything wrong with this:

@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不能正常工作？

Why doesn't this work in IE 10?

编辑

为什么横向工作，而不是垂直（ fiddle ）？

Why does the horizontal one work, but not the vertical (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;
}

推荐答案

IE（请参阅类似的SO问题< a>）。为了解决这个问题，我只是将初始和最终偏移更改为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;
}

这篇关于为什么这个CSS动画在IE10中工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！