为什么这个CSS动画在IE10中不起作用?

时间:2013-03-07 20:10:50

标签: css css3 internet-explorer-10 css-animations

This JSFiddle包含适用于Chrome,Firefox和Safari的CSS动画,但不适用于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;
}

1 个答案:

答案 0 :(得分:4)

它看起来像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;
}