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;
}
最佳答案
它看起来像是 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;
}
关于css - 为什么这个 CSS 动画在 IE10 中不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15280791/