Transizione filtro SVG in Firefox

Question

Sto tentando di trasferire un'immagine da un filtro in scala di grigi del 50% al suo stato senza filtro su hover.

Tuttavia, la transizione non funziona in Firefox. È possibile ottenere la transizione in esecuzione in firefox utilizzando solo 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); 
} 

Answer 1

Poiché la sintassi del filtro standard è un url non è suscettibile di transizione. Gecko dovrebbe implementare la parte shorthands delle specifiche in costruzione Filter Effects affinché funzioni.

Nel frattempo è possibile farlo utilizzando l'animazione SVG ma non solo tramite CSS.