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工作正如你我想的那樣或者你想要澄清的東西。