用於Firefox的background-image的CSS3過渡不起作用

我的背景圖像過渡在Chrome中運行正常，但在Firefox中不做任何事情。我是CSS3轉換的新手。研究和我的語法似乎是正確的。從我讀過的FF中應該支持這一點。我在FF 12.0上。爲什麼這個CSS3轉換在Firefox中不起作用。用於Firefox的background-image的CSS3過渡不起作用

No javascript。沒有解決方法。只是解釋爲什麼這種失敗會是美好的。

http://jsfiddle.net/VCdGt/3/

a.call_to_action 
{ 
    text-decoration: none; 
    display: block; 
    color: #232744; 
    font-size: 20px; 
    font-weight: bold; 
    height: 47px; 
    width: 185px; 
    overflow: hidden; 
    margin: 10px auto 15px auto; 
    text-align: center; 
    border: none; 
    background: yellow; 
    background-image: url(http://www.pslover.com/images/thumb/2751.jpg); 
    -webkit-transition: background-image .5s linear; 
    -moz-transition: background-image .5s linear; 
} 

a.call_to_action:hover { 
    background: orange; 
    background-image: url(http://www.tutorialdash.com/avatars/3b1f70c20325d8676ce1f56cb9b43f17.gif); 
    color: #4F4246; 
}

來源

2012-04-27 mrtsherman

我認爲出於某種原因，IE9和FF不支持gif。可能是我認爲你應該嘗試創建一些精靈，並把'js' SetInterval＆不斷改變圖像，但它的令人討厭的精靈數量，你必須平滑過渡。 – uday 2012-04-27 16:59:46

@uDaY - 感謝您的建議。我實際上在本地使用png，所以我不認爲這是事實。爲了演示，我只是從網上抓取這些圖片。我不想爲此使用js。我寧願放棄它，也不願意使用js。 – mrtsherman 2012-04-27 17:01:35

在png的情況下，你有沒有試過看CSS Sprites？ – uday 2012-04-27 17:03:18

發現在MDN文檔的答案。

http://oli.jp/2010/css-animatable-properties/#background-image

背景圖像

這仍然是一點點在空氣中，以「只梯度」在當前工作草案，沒有背景圖片，在所有的當前編輯草稿，以及CSS中背景圖像的「Animatable：no」 Background and Borders Module Level 3 Editor's Draft。但是，Chrome 19 Canary中已經出現了支持，這是設計人員想要的東西。在廣泛的支持到來之前，這可以通過圖像精靈和背景位置或不透明度僞造。

此時我發現沒有人真正支持漸變（Chrome 17，FF 12，IE9）。只有Chrome支持background-image（這就是爲什麼它不適用於FF）。

來源

2012-04-27 20:05:37 mrtsherman

這是2014年和background-image屬性仍不動畫：WebKit在 http://dev.w3.org/csswg/css-backgrounds/#background-image

工作正常，但不能在Firefox。看起來製作一些動畫的唯一方法是使用jQuery的fallback for Firefox。

來源

2014-10-26 12:34:56

用於Firefox的background-image的CSS3過渡不起作用

回答

相關問題