title: Firefox: Image transition, ease out to grayscale
body: <p>I have css that works in chrome, when I tested in Firefox, it will not work.
  Here is code:</p>
  
  <pre><code>&lt;div class="img"&gt;
  &lt;a href="/"&gt;
  &lt;img src="http://upload.wikimedia.org/wikipedia/commons/8/80/Knut_IMG_8095.jpg" alt="Smiley face" height="400" width="600"&gt;
  &lt;/a&gt;
  &lt;/div&gt;
  
  
  
  img {
        -webkit-transition: all 1s ease;
           -moz-transition: all 1s ease;
             -o-transition: all 1s ease;
            -ms-transition: all 1s ease;
                transition: all 1s ease;
      display: block;
      }
  
  img:hover {
      -webkit-filter: grayscale(100%);
      display: block;
      }
  </code></pre>
  
  <p>Demo: <a href="http://jsfiddle.net/X8LQk/2/" rel="nofollow">http://jsfiddle.net/X8LQk/2/</a></p>