Why doesn't this CSS animation work in IE10?

css, css-animations, internet-explorer-10

Solution

It looks like a bug in IE (see similar SO question). To get around this, I simply changed the initial and final offsets to 0.1px instead of 0. This seems to have solved the problem. The solution code (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;
}

Problem

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; } ``` Why doesn't this work in IE 10? EDIT Why does the horizontal one work, but not the vertical (fiddle)? Horizontal animation: ``` @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; } ```

Original source