Why doesn't transition: filter work in Mozill?

Question

css

Now on the Internet I found a cross-platform solution for filter: grayscale. Everything works well, everything is fine. But exactly until you want to add the transition: filter property. Because this property in FF does not work at all. Here is the code itself:

.grayscale {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: url(../svg/grayscale.svg#grayscale); /* Firefox 4+ */
  filter: gray; /* IE 6-9 */
  filter: grayscale(100%);

  -webkit-transition: -webkit-filter .5s, filter .5s;
  -moz-transition: -moz-filter .5s, filter .5s;
  -o-transition: -o-filter .5s, filter .5s;
  transition: -webkit-filter .5s, -moz-filter .5s, -ms-filter .5s, -o-filter .5s, filter .5s;
}

.grayscale:hover {
  -webkit-filter: grayscale(0);
  -moz-filter: grayscale(0);
  -ms-filter: grayscale(0);
  -o-filter: grayscale(0);
  filter: none;
}

It seems to be due to svg. Does anyone know how to solve the problem?

Answer 1

For all shades of gray

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

For color version:

-webkit-filter:grayscale(0);
filter:none;

The lines for -webkit-filter are just for orientation. transition should work.