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">
    <h3>Full Images at 0.6 Second Animation:</h3>
    <p>Simply add class of filter-resat6 to the img tag. Also includes an<br />opacity transition from 0.6 to 1.0 to help it pop a bit more.</p>
    <img class="filter-resat6" src="http://buttonpresser.com/CivicIdeas_BS/img/gg_bridge.png" />
    <br />
    <br />
    <br />
    <br />
    <h3>User Avatars at 0.2 Second Animation:</h3>
    <p>Simply add class of filter-resat2 to the img tag. Also includes an<br />opacity transition from 0.6 to 1.0 to help it pop a bit more.</p>
    <ul>
        <li><img class="filter-resat2" src="http://buttonpresser.com/CivicIdeas_BS/img/avatars/alia_profile.png" /></li>
        <li><img class="filter-resat2" src="http://buttonpresser.com/CivicIdeas_BS/img/avatars/annyong_profile.png" /></li>
        <li><img class="filter-resat2" src="http://buttonpresser.com/CivicIdeas_BS/img/avatars/buster_profile.png" /></li>
        <li><img class="filter-resat2" src="http://buttonpresser.com/CivicIdeas_BS/img/avatars/george_profile.png" /></li>
        <li><img class="filter-resat2" src="http://buttonpresser.com/CivicIdeas_BS/img/avatars/henry_profile.png" /></li>
        <li><img class="filter-resat2" src="http://buttonpresser.com/CivicIdeas_BS/img/avatars/jason_profile.png" /></li>
        <li><img class="filter-resat2" src="http://buttonpresser.com/CivicIdeas_BS/img/avatars/lucille_profile.png" /></li>
        <li><img class="filter-resat2" src="http://buttonpresser.com/CivicIdeas_BS/img/avatars/lucille2_profile.png" /></li>
        <li><img class="filter-resat2" src="http://buttonpresser.com/CivicIdeas_BS/img/avatars/michael_profile.png" /></li>
        <li><img class="filter-resat2" src="http://buttonpresser.com/CivicIdeas_BS/img/avatars/portia_profile.png" /></li>
        <li><img class="filter-resat2" src="http://buttonpresser.com/CivicIdeas_BS/img/avatars/tobias_profile.png" /></li>
        <li><img class="filter-resat2"...

CSS

body {
    margin:0;
    padding:0;
    font-family: Helvetica, Arial, san-serif;
    color:#CCC;
}
.wrapper {
    position:absolute;
    top:100px;
    left:50%;
    margin:0 0 0 -250px;
    height:2000px;
}
p {font-size:12px;color:#999;margin:-10px 0 40px;}
.wrapper ul {list-style:none;margin:0;padding:0;width:270px;}
.wrapper ul li {
    width:40px;
    height:40px;
    float:left;
    margin:0 5px 5px 0;
}
img[class*="filter-resat"] {
    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%);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    filter: alpha(opacity=40);
    -moz-opacity: 0.6;
    -khtml-opacity: 0.6;
    opacity: 0.6;
    -webkit-transition: all 1.0s ease;
    -webkit-backface-visibility: hidden;
}
img[class*="filter-resat"]: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.filter-resat9 {-webkit-transition: all .9s ease;}
img.filter-resat8 {-webkit-transition: all .8s ease;}
img.filter-resat7 {-webkit-transition: all .7s ease;}
img.filter-resat6 {-webkit-transition: all .6s ease;}
img.filter-resat5 {-webkit-transition: all .5s ease;}
img.filter-resat4 {-webkit-transition: all .4s ease;}
img.filter-resat3 {-webkit-transition: all .3s ease;}
img.filter-resat2 {-webkit-transition: all .2s ease;}
img.filter-resat1 {-webkit-transition: all .1s ease;}