爲什麼這個CSS動畫不能在IE10中工作？

Question

This JSFiddle包含一個CSS動畫，適用於Chrome，Firefox和Safari，但不適用於IE 10.我知道IE 10 doesn'tneed的前綴-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; 
} 

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