css - IE 9 和 10 背景位置

Question

我正在使用动画关键帧和背景图像属性为方形精灵（n 行 xm 列）制作动画。它在 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 上解决此问题？

score 4 · Accepted Answer

它在 IE9 中完全被破坏了，因为它不支持 CSS3 动画：

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

它在 IE10 中被破坏有两个原因：

因为您不应该-ms-在 IE10 及更高版本中使用动画属性的前缀：
- http://msdn.microsoft.com/library/ie/hh772212.aspx
- http://msdn.microsoft.com/en-US/library/ie/hh772747.aspx
因为 IE10 有一个错误，它没有在动画 0中正确使用值：background-position
- 为什么这个 CSS 动画在 IE10 中不起作用？

要修复第 2 部分，您可以使用接近0like的值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在这里。

css - IE 9 和 10 背景位置

1 回答 1

Related

Reference