SVG Filter Transition in Firefox

问题

I'm attempting to transition an image from a 50% grey scale filter to its filterless state on hover.

The transition doesn't work in firefox however. Is it possible to get the transition running in firefox using only css?

img {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'0.5\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
    filter: gray alpha(opacity=50); /* IE6-9 */
    -webkit-filter: grayscale(50%); /* Chrome 19+ & Safari 6+ */
    -webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
    -moz-transition: all .6s ease; 
    -ms-transition: all .6s ease; 
    transition: all .6s ease;
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */
}
img:hover {
    filter: none;
    -webkit-filter: grayscale(0);
}

回答1:

Because the standard filter syntax is a url it's not amenable to transitioning. Gecko would have to implement the shorthands part of the under construction Filter Effects specification for this to work.

In the meantime you could do this using SVG animation but not via CSS only.

来源：https://stackoverflow.com/questions/13757420/svg-filter-transition-in-firefox