悬停变换过渡不起作用

Question

所以我有这张图片，我想在悬停时增加它的饱和度。

这是图像的类：

.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;
}