灰度到颜色过渡在Firefox中不起作用

Question

.picture-box img {

display: inline-block;
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 3.5+ */
filter: gray; /* IE6-9 */
filter: grayscale(100%);
-webkit-filter: grayscale(1);
-moz-filter: grayscale(1);
-o-filter: grayscale(1);
-ms-filter: grayscale(1);

}

.picture-box img:hover {

filter: none; /* IE6-9 */
filter: grayscale(0);
-webkit-filter: grayscale(0);
-moz-filter: grayscale(0);
-o-filter: grayscale(0);
-ms-filter: grayscale(0);

-webkit-transition: all 2.0s ease-out;
-moz-transition: all 2.0s ease-out;
-ms-transition: all 2.0s ease-out;
-o-transition: all 2.0s ease-out;
transition: all 2.0s ease-out;

}

What is wrong with this code? Transition does not work in Firefox. I have 21.0 installed.

Answer 1

Try setting .picture-box img:hover to this:

 filter:grayscale(0%); 
 -webkit-filter: grayscale(0%);
 filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");

You can look it up here. http://www.cheesetoast.co.uk/add-grayscale-images-hover-css-black-white/

Answer 2

The problem is that Firefox does not yet support CSS filter effects (as of 29.0.1), which is why your first block of code includes a line for an SVG filter, which Firefox does support. Unlike CSS filter effects, the SVG filter cannot be transitioned with CSS.

I don't know of any pure CSS solution for Firefox, but there are a few ways to tackle it with JS (such as dynamically replacing the image with a SVG or HTML5 canvas copy that can be overlaid and faded). This jQuery plugin does a good job of covering all the bases for most browsers: https://github.com/karlhorky/gray