IE 9和10背景位置

我用動畫關鍵幀和背景圖像屬性爲平方精靈（n行x m列）設置動畫。它工作正常，在Chrome，FF和Safari瀏覽器，但它完全打破對IE 9和10IE 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瀏覽器？

來源

2013-10-25 Pierre

什麼得到的CSS是什麼樣子？你能把它放在小提琴裏嗎？ –

我不能把小提琴。它看起來像x或y沒有被調用。結果是一個非常生澀的動畫。 – Pierre

@MrLister這裏是一個小提琴http://jsfiddle.net/kn6uD/ – Pierre

它完全打破了IE9，因爲它不支持CSS3動畫：

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

它在IE10破碎的原因有兩個：

因爲你不應該在IE10及以上版本中使用動畫屬性的-ms-前綴：
- http://msdn.microsoft.com/library/ie/hh772212.aspx
- http://msdn.microsoft.com/en-US/library/ie/hh772747.aspx
由於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.

來源

2013-10-28 19:47:05 SombreErmine

至少有人讀過文檔+1 – LuudJacobs

這很奇怪，因爲你的例子有效，但有時它不會。 – Pierre

我已經修復了它在IE10中工作的問題，然後刷新了它並且變得不連貫。答案已更新。問題在於IE10不知道如何在動畫過程中在'background-position'中正確使用'0'值（無論出於什麼原因）。 – SombreErmine

IE 9和10背景位置

回答

相關問題