Firefox的CSS灰度濾鏡過渡

Question

我在網站上的圖像上使用了灰度濾鏡，將鼠標懸停時圖像會切換為彩色，淡入和淡出時間為0.3s。 它可以在Chrome上完美運行，但不能在Firefox中運行...我一直在網上尋找解決方案，但沒有一個在起作用...有人知道這樣做的方法嗎？ Firefox是否有新的CSS解決方案？

這是我的CSS：

.img {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 4+ */
filter: gray; /* IE 6-9 */
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
filter-transition: all 0.6s ease-in-out;
}

.img:hover{ 
-webkit-filter: none;
-moz-filter:none;
-ms-filter: none;
-o-filter:none;
filter: none;
}

這是一個jsfiddle：

http://jsfiddle.net/25hrJ/

謝謝你的幫助 ！

Answer 1

我認為Firefox尚未正確支持背景動畫。 Di您已經使用JQuery .animation嘗試了嗎？

另一個（駭人聽聞的）解決方案是嘗試將圖像不透明度降低到0％。 如果可行，您可以將灰度圖像放在彩色圖像的前面，然后讓灰度圖像淡出，讓彩色圖像通過。