IE 9 and 10 background-position

Question

I'm animating a squared sprite (n lines x m columns) with animation keyframes and background-image property. It works fine on Chrome, FF and Safari but it's totally broken on IE 9 and 10.

Here a bit of CSS (with SASS):

include keyframes(animation) {
    @for $i from 0 through 45 {
        $line : floor($i/9);
        $col : $i%9;
        $s : 20.03+($i * 14)/45 + "%";
        @if $i != 45 { #{$s}{background-position: ($col * -163px) ($line * -107px);};}
    }
}

How can I fix this on IE ?

Answer 1

It's totally broken in IE9, because it does not support CSS3 animations:

• http://msdn.microsoft.com/en-us/library/hh781508(v=vs.85).aspx#animations

It's broken in IE10 for two reasons:

1. Because you're not supposed to use the -ms- prefix for animation properties in IE10 and above:
   • http://msdn.microsoft.com/library/ie/hh772212.aspx
   • http://msdn.microsoft.com/en-US/library/ie/hh772747.aspx
2. Because IE10 has a bug where it doesn't use 0 values for background-position correctly in animations:
   • Why doesn't this CSS animation work in IE10?

To fix part 2, you can use a value close to 0 like 0.1.

Thus use this CSS instead:

#ball {
  background-image: url('http://i.imgur.com/pKnpIzd.png');
  width: 133px;
  height: 170px;
  position: absolute;
  top: 150px;
  left: 280px;
  z-index: 2;
  -webkit-animation: ball 10s infinite ; 
  -webkit-animation-timing-function: step-start; 
  animation: ball 10s infinite ; 
  animation-timing-function: step-start; 
}

/* WEBKIT VERSION */

@-webkit-keyframes ball {
  16% { background-position: 0px 0px; }
  16.49296% { background-position: -133px 0px; }
  16.98592% { background-position: -266px 0px; }
  17.47887% { background-position: -399px 0px; }
  17.97183% { background-position: -532px 0px; }
  18.46479% { background-position: -665px 0px; }
  18.95775% { background-position: -798px 0px; }
  19.4507% { background-position: -931px 0px; }
  19.94366% { background-position: 0px -170px; }
  20.43662% { background-position: -133px -170px; }
  20.92958% { background-position: -266px -170px; }
  21.42254% { background-position: -399px -170px; }
  21.91549% { background-position: -532px -170px; }
  22.40845% { background-position: -665px -170px; }
  22.90141% { background-position: -798px -170px; }
  23.39437% { background-position: -931px -170px; }
  23.88732% { background-position: 0px -340px; }
  24.38028% { background-position: -133px -340px; }
  24.87324% { background-position: -266px -340px; }
  25.3662% { background-position: -399px -340px; }
  25.85915% { background-position: -532px -340px; }
  26.35211% { background-position: -665px -340px; }
  26.84507% { background-position: -798px -340px; }
  27.33803% { background-position: -931px -340px; }
  27.83099% { background-position: 0px -510px; }
  28.32394% { background-position: -133px -510px; }
  28.8169% { background-position: -266px -510px; }
  29.30986% { background-position: -399px -510px; }
  29.80282% { background-position: -532px -510px; }
  30.29577% { background-position: -665px -510px; }
  30.78873% { background-position: -798px -510px; }
  31.28169% { background-position: -931px -510px; }
  31.77465% { background-position: 0px -680px; }
  32.26761% { background-position: -133px -680px; }
  32.76056% { background-position: -266px -680px; }
  33.25352% { background-position: -399px -680px; }
  33.74648% { background-position: -532px -680px; }
  34.23944% { background-position: -665px -680px; }
  34.73239% { background-position: -798px -680px; }
  35.22535% { background-position: -931px -680px; }
  35.71831% { background-position: 0px -850px; }
  36.21127% { background-position: -133px -850px; }
  36.70423% { background-position: -266px -850px; }
  37.19718% { background-position: -399px -850px; }
  37.69014% { background-position: -532px -850px; }
  38.1831% { background-position: -665px -850px; }
  38.67606% { background-position: -798px -850px; }
  39.16901% { background-position: -931px -850px; }
  39.66197% { background-position: 0px -1020px; }
  40.15493% { background-position: -133px -1020px; }
  40.64789% { background-position: -266px -1020px; }
  41.14085% { background-position: -399px -1020px; }
  41.6338% { background-position: -532px -1020px; }
  100% { background-position: -532px -1020px; }
}

/* STANDARDS-COMPLIANT VERSION */

@keyframes ball { 
  16% { background-position: 0.1px 0.1px; }
  16.49296% { background-position: -133px 0.1px; }
  16.98592% { background-position: -266px 0.1px; }
  17.47887% { background-position: -399px 0.1px; }
  17.97183% { background-position: -532px 0.1px; }
  18.46479% { background-position: -665px 0.1px; }
  18.95775% { background-position: -798px 0.1px; }
  19.4507% { background-position: -931px 0.1px; }
  19.94366% { background-position: 0.1px -170px; }
  20.43662% { background-position: -133px -170px; }
  20.92958% { background-position: -266px -170px; }
  21.42254% { background-position: -399px -170px; }
  21.91549% { background-position: -532px -170px; }
  22.40845% { background-position: -665px -170px; }
  22.90141% { background-position: -798px -170px; }
  23.39437% { background-position: -931px -170px; }
  23.88732% { background-position: 0.1px -340px; }
  24.38028% { background-position: -133px -340px; }
  24.87324% { background-position: -266px -340px; }
  25.3662% { background-position: -399px -340px; }
  25.85915% { background-position: -532px -340px; }
  26.35211% { background-position: -665px -340px; }
  26.84507% { background-position: -798px -340px; }
  27.33803% { background-position: -931px -340px; }
  27.83099% { background-position: 0.1px -510px; }
  28.32394% { background-position: -133px -510px; }
  28.8169% { background-position: -266px -510px; }
  29.30986% { background-position: -399px -510px; }
  29.80282% { background-position: -532px -510px; }
  30.29577% { background-position: -665px -510px; }
  30.78873% { background-position: -798px -510px; }
  31.28169% { background-position: -931px -510px; }
  31.77465% { background-position: 0.1px -680px; }
  32.26761% { background-position: -133px -680px; }
  32.76056% { background-position: -266px -680px; }
  33.25352% { background-position: -399px -680px; }
  33.74648% { background-position: -532px -680px; }
  34.23944% { background-position: -665px -680px; }
  34.73239% { background-position: -798px -680px; }
  35.22535% { background-position: -931px -680px; }
  35.71831% { background-position: 0.1px -850px; }
  36.21127% { background-position: -133px -850px; }
  36.70423% { background-position: -266px -850px; }
  37.19718% { background-position: -399px -850px; }
  37.69014% { background-position: -532px -850px; }
  38.1831% { background-position: -665px -850px; }
  38.67606% { background-position: -798px -850px; }
  39.16901% { background-position: -931px -850px; }
  39.66197% { background-position: 0.1px -1020px; }
  40.15493% { background-position: -133px -1020px; }
  40.64789% { background-position: -266px -1020px; }
  41.14085% { background-position: -399px -1020px; }
  41.6338% { background-position: -532px -1020px; }
  100% { background-position: -532px -1020px; } 
}

JSFiddle here.