过滤器属性的CSS过渡[重复]

Question

这个问题在这里已经有了答案:

CSS-过滤过渡 (2个答案)

封闭 上月.

我试图应用一个缓和过渡，使我的购物车图片从白色变成蓝色。

如果没有过渡，白色到蓝色的效果就可以，但没有任何形式的缓和。

问题在于 "所有 "过渡属性，它正在创建一个彩虹效果，你会看到绿色的条纹，短暂的一秒钟，然后最后是蓝色。我不确定你是否能够单独调用单独的滤镜（google找不到任何东西），比如亮度和饱和度自己。

这是我目前的情况。

.top-register .register-image img:hover {
    filter: sepia(100%) contrast(100%) saturate(100) brightness(60%) hue-rotate(130deg);
    transition: all 1s ease-in-out;;
}

Answer 1

为了使过渡工作，你需要在元素中添加滤镜，不需要:hover，但要以一种几乎看不见的方式添加。

例如：

.top-register .register-image img {
 filter: sepia(0.1%) contrast(100%) saturate(1) brightness(100%) 
   hue-rotate(0deg);
  transition: all 1s ease-in-out;;
 }


.top-register .register-image img:hover {
 filter: sepia(100%) contrast(100%) saturate(100) brightness(60%) 
   hue-rotate(130deg);
  transition: all 1s ease-in-out;;
 }