懸停變換過渡不工作

Question

所以我有這個圖像，我想在hoovering時增加它的飽和度。

這是類的圖像：

.trans { 
    -webkit-filter: saturate(70%); 
    -webkit-transition: saturate 2s ease; 
    -moz-transition: saturate 2s ease; 
     -o-transition: saturate 2s ease; 
     -ms-transition: saturate 2s ease; 
      transition: saturate 2s ease; 
} 

.trans:hover { 
    -webkit-filter: saturate(190%); 

} 

胡佛正在工作和所述飽和度增加，但過渡是即時的，並沒有考慮2秒（或其它值，我把） 。我注意到，在這個網站我嘗試了另一個懸停效果（模糊圖像），我有同樣的問題。

我該怎麼辦？

Answer 1

我相信你需要使用「filter」或「-webkit-filter」作爲轉換的目標，例如，

.trans { 
    -webkit-transition: -webkit-filter 2s ease; 
    transition: -webkit-filter 2s ease; 
}