如何在CSS中通过Transition更改灰度

Question

我需要在悬停时更改过滤器：灰度，但在我的代码中使用过渡属性我无法传输过滤器：灰度（）值。

我使用过FireBug，看到灰色选择器的悬停状态为空！。

.gray
{
 filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='matrix'%20values='0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200'/></filter>    </svg>#grayscale"); /* Firefox 3.5+ */
filter: gray; /* IE6+ */
filter: grayscale(100%); /* Current draft standard */
-webkit-filter: grayscale(1); /* New WebKit */
-moz-filter: grayscale(1);
-ms-filter: grayscale(1); 
-o-filter: grayscale(1);



-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius:15px;
-webkit-transition-property:all;
-webkit-transition-duration: 0.5s, 0.5s;
-webkit-transition-timing-function: linear, ease-in;
-moz-transition-property:all;
-moz-transition-duration:1s;
-moz-transition-timing-function: linear, ease-in;
-o-transition-property:all;
-o-transition-duration:0.5s;
-o-transition-timing-function: linear, ease-in;
}

.gray:hover 
{
filter:none;
filter: grayscale(0%); /* Current draft standard */
-webkit-filter: grayscale(0); /* New WebKit */
-moz-filter: grayscale(0);
-ms-filter: grayscale(0); 
-o-filter: grayscale(0);


}