CSS3动画去饱和

Question

我在图像上使用去饱和处理，使其成为黑色和白色。我希望它能够在悬停时使用CSS3转换淡入颜色，但我似乎无法使其发挥作用。有任何想法吗？

下面是一个例子：http://jsfiddle.net/sChY5/以下是我的CSS

img.desaturate { 
-webkit-transition: all 0.2s ease-in-out; 
-moz-transition: all 0.2s ease-in-out; 
-o-transition: all 0.2s ease-in-out; 
transition: all 0.2s ease-in-out; 
filter: grayscale(100%); 
-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); 
-ms-filter: grayscale(100%); -o-filter: grayscale(100%); 
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(1); 
} 

img.desaturate: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%); 
} 

Answer 1

你没有把上好的类选择的transition性能。

不得位于img.desaturate:hover，但img.desaturate

（我说说你的jsfiddle的演示，这是不是你已经张贴在这里同样的代码）

Answer 2

我只是检查，并得到它的jsfiddle工作正如你我想的那样或者你想要澄清的东西。