IE 9和10背景位置

Question

我用动画关键帧和背景图像属性为平方精灵（n行x m列）设置动画。它工作正常，在Chrome，FF和Safari浏览器，但它完全打破对IE 9和10

这里有点CSS（有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);};} 
    } 
} 

我怎样才能解决这个IE浏览器？

Answer 1

它完全打破了IE9，因为它不支持CSS3动画：

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

它在IE10破碎的原因有两个：

1. 因为你不应该在IE10及以上版本中使用动画属性的-ms-前缀：
   • http://msdn.microsoft.com/library/ie/hh772212.aspx
   • http://msdn.microsoft.com/en-US/library/ie/hh772747.aspx
2. 由于IE10有一个错误的地方不适合background-position正确使用动画0值：
   • Why doesn't this CSS animation work in IE10?

要解决第2部分，你可以使用一个值接近0，比如0.1。

因此使用CSS来代替：

#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.