firefox css灰度過濾器轉換

Question

我在我的網站上對圖像使用灰度過濾器，圖像在懸停時切換爲顏色，0.3s淡入淡出。 它在Chrome上完美工作，但不在Firefox中......我一直在網上尋找解決方案，但沒有一個在工作......有沒有人知道一種方法來做到這一點？有沒有新的CSS與Firefox的解決方案？

這裏是我的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支持正確的背景動畫呢。你用JQuery.animation試試吧？

另一個（哈克）解決方案將嘗試淡化圖像不透明度爲0％。如果可以的話，你可以在一個彩色的圖像前面放置一個灰度圖像，並讓灰度圖像消失，讓彩色圖像進入低谷。