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％。 如果可行，您可以将灰度图像放在彩色图像的前面，然后让灰度图像淡出，让彩色图像通过。