Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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);
}
like image 306
Ryan King Avatar asked Oct 21 '22 23:10

Ryan King


1 Answers

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.

like image 109
Robert Longson Avatar answered Nov 04 '22 02:11

Robert Longson