title: firefox css grayscale filter transition
body: <p>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 ?</p>
  
  <p>here is my css :</p>
  
  <pre><code>.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,&lt;svg xmlns=\'http://www.w3.org/2000/svg\'&gt;&lt;filter id=\'grayscale\'&gt;&lt;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\'/&gt;&lt;/filter&gt;&lt;/svg&gt;#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;
  }
  </code></pre>
  
  <p>and here is a jsfiddle :</p>
  
  <p><a href="http://jsfiddle.net/25hrJ/" rel="nofollow">http://jsfiddle.net/25hrJ/</a></p>
  
  <p>thanks for your help !</p>