Cross-browser Animated Resaturate on Hover

Pure CSS solution for cross-browser friendly image saturation animation, also includes a opacity change.

HTML

<div class="wrapper">
		    <h1><span>Chroma:</span> CSS-only image saturation animation</h1>
		    <p>Special thanks to <a href="http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html">Karl Horky</a> for the breakthrough with saturation filters for IE. This was an effect I had been implimenting with jQuery and the color.js plugin but the result was too reliant on codebase. This is a much smaller approach that works will in a lot of templating environments like Twitter Bootstrap, infact my intention was to controll the animation settings when declaring the element's class attribute. Chroma has a lightning-fast load time and looks great in most browsers. It degrades gracefully.</p>
		    <p>The default opacity is set to 0.6 and is configurable. I find that adding the opacity animation to the re-saturation effect helps to make the defaut state of the image integrate into the page better, regardless of background color. It also help to make the effect pop a bit, emphasising the color and making the animation more dynamic.</p>
		    <p>The saturation level, opacity, duration, and easing are all configurable and without the need to add code. Look for more filters and effects soon.</p>
		    <h3>Large image with 0.6s animation and linear easing</h3>
		    <p>Simply add class of chroma6 to the img tag.</p>
		    <img class="chroma6 linear" src="http://buttonpresser.com/projects/chroma/gg_bridge.png" />
		    <br />
		    <br />
		    <br />
		    <br />
		    <h3>Profile pics with 0.2s animation and ease-out</h3>
		    <p>Simply add class of "chroma2 ease-out" to the img tag.</p>
		    <ul>
		        <li><img class="chroma2 ease-out" src="http://buttonpresser.com/projects/chroma/avatars/george.png" /></li>
		        <li><img class="chroma2 ease-out" src="http://buttonpresser.com/projects/chroma/avatars/maybe.png" /></li>
		        <li><img class="chroma2 ease-out" src="http://buttonpresser.com/projects/chroma/avatars/barry.png" /></li>
		       ...

CSS

body {
    margin:0;
    padding:0;
    font-family: Helvetica, Arial, san-serif;
    color:#CCC;
    background-color:#000;
}
a {color:#CCC; font-weight:normal;}
a:hover {color:#666;}
.wrapper {
    position:absolute;
    top:100px;
    left:50%;
    margin:0 0 80px -250px;
    height:2000px;
    width:500px;
}
p {font-size:12px;color:#999;margin:-10px 0 40px;}
.wrapper ul {list-style:none;display:block;margin:0;padding:0;width:492x;}
.wrapper ul li {
    width:36px;
    height:36px;
    float:left;
    margin:0 5px 5px 0;
}
.wrapper ul li img {
    height:36px;
    width:36px;
}

/* --- Use style below this line when implimenting the code --- */

img[class*="chroma"] {
    filter: url("data:image/svg+xml;utf8,<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>#grayscale");
    filter: gray;
    -webkit-filter: grayscale(100%) blur(6px);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    filter: alpha(opacity=40) blur(6px);
    -moz-opacity: 0.6;
    -khtml-opacity: 0.6;
    opacity: 0.6;
    -webkit-transition: all 1s;
    -webkit-backface-visibility: hidden;
}
img[class*="chroma"]:hover {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
}
img.chroma9.linear {-webkit-transition: all .9s linear;}
img.chroma8.linear {-webkit-transition: all .8s linear;}
img.chroma7.linear {-webkit-transition: all .7s linear;}
img.chroma6.linear {-webkit-transition: all .6s linear;}
img.chroma5.linear {-webkit-transition: all .5s...