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有一个错误，它在动画中没有正确使用0的{​​{1}}值：
   • Why doesn't this CSS animation work in IE10?

要修复第2部分，您可以使用接近background-position的值，例如0。

因此请改用此CSS：

0.1

JSFiddle here.