IE10에서이 CSS 애니메이션이 작동하지 않는 이유는 무엇입니까?

Question

This JSFiddle에는 Chrome, Firefox 및 Safari에서는 작동하지만 IE 10에서는 작동하지 않는 CSS 애니메이션이 포함되어 있습니다. 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

이 (similar SO question 참조) IE의 버그처럼 보인다. 이 문제를 해결하기 위해 초기 오프셋과 최종 오프셋을 0 대신 0.1px로 변경했습니다. 문제가 해결 된 것 같습니다. 솔루션 코드 (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; 
}