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

Question

我正在尝试应用缓动过渡，以便我的购物车图像从白色变为蓝色。

如果没有过渡，白色到蓝色的效果会起作用，但没有任何缓动。

问题在于“全部”过渡属性，它会产生彩虹效果，您会在短时间内看到绿色条纹，然后最后是蓝色条纹。我不确定您是否能够调用单独的过滤器（在谷歌上找不到任何东西），例如亮度和饱和度。

这是我目前得到的：

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