Firefox的CSS灰度过滤器过渡 [英] firefox css grayscale filter transition

问题描述

我在网站上的图片上使用了灰度过滤器，图片在悬停时切换为颜色，0.3s淡入淡出。
它在Chrome上完美的工作，但不是在Firefox中...我一直在网上搜索的解决方案，但他们都没有工作...有没有人知道一种方法来做到这一点？有没有新的CSS解决方案与Firefox？

这是我的CSS：

  .img {
 -webkit-filter：greyscale（100％）; 
 -moz-filter：灰度（100％）; 
 -ms-filter：灰度（100％）; 
 -o-filter：灰度（100％）; 
 filter：灰度（100％）; 
 filter：url（data：image / svg + xml; utf8，< svg xmlns = \'http：//www.w3.org/2000/svg\&>< filter id = \\'灰度\\'>< feColorMatrix类型= \\'矩阵\\'值= \\'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 \\'\\ >< /滤光器>< / SVG> #grayscale）; / * Firefox 4+ * / 
 filter：grey; / * IE 6-9 * / 
 -webkit-transition：全部0.6s缓入; 
 -moz-transition：全部0.6s缓出; 
 o过渡：全部0.6s缓出; 
 -ms-transition：全部0.6s缓出; 
过渡：全部0.6s缓出; 
筛选器转换：全部0.6s缓进; 
} 
 
 .img：hover {
 -webkit-filter：none; 
 -moz-filter：none; 
 -ms-filter：none; 
 -o-filter：none; 
 filter：none; 
 
 $ / code> 

这里是一个jsfiddle：



http://jsfiddle.net/25hrJ/

感谢您的帮助！

解决方案

我不认为Firefox支持正确的背景动画。那么你用JQuery.animation来试试吧？

另一个解决方法是尝试淡化图像不透明度到0％。如果可以的话，你可以在彩色的图像前面放置一个灰度图像，让灰度图像消失，让彩色的图像消失。

I'm using grayscale filters on images on my website, the image switches to color when hover, with a 0.3s fade in and out. it works perfectly on Chrome, but not in firefox... I've been searching on the net for solutions but none of them are working... does anybody knows a way to do it ? are there new css solutions with firefox ?

here is my 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;
}

and here is a jsfiddle :

http://jsfiddle.net/25hrJ/

thanks for your help !

解决方案

I don't think that Firefox supports animation of backgrounds properly yet. Di you try it with JQuery .animation already?

Another (hacky) solution would be to try to fade an image opacity to 0%. If that works you could put a grayscale image in front of a colored one and let the grayscale image fade away letting the colored one come trough.

这篇关于Firefox的CSS灰度过滤器过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！