Transition an SVG from grayscale like css3 transition animation

Question

I'm trying to transition an element from grayscale to color with a technique outlined below:

CSS

  .technical .tech-icon {
      width: 33px;
      height: 32px;
      display: inline-block;
      filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
      filter: gray; /* IE6-9 */
      -webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */

      -webkit-transition: all 0.5s ease-out;  /* Safari 3.2+, Chrome */
         -moz-transition: all 0.5s ease-out;  /* Firefox 4-15 */
           -o-transition: all 0.5s ease-out;  /* Opera 10.5–12.00 */
              transition: all 0.5s ease-out;  /* Firefox 16+, Opera 12.50+ */
      }

For firefox, we have filters.svg

<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>

How can I mimic the same transition property that works on Chrome, IE9 etc?

Edit: I am looking to get my transition properties working with my SVG fix for Firefox.

Answer 1

You can overlay an extra element that holds the grayscale version to the color version. Then you animate opacity...

 .technical .tech-icon {
      position: relative;
      ...
  }

 .technical .tech-icon .grayscale {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      opacity: 0;
      -webkit-filter: grayscale(1);
      filter: url(filters.svg#grayscale); /*Firefox*/
      filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)
              filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); /*IE*/
  }

For browsers that don't support CSS transitions you can animate the opacity with jQuery's fadeIn()