firefox css grayscale filter transition

Question

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 !

Answer 1

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.