Css 悬停延迟(过滤器)

Question

我对页面上的图像使用灰度滤镜，对悬停使用非常饱和的滤镜。

当图像悬停时，我希望 img 有 2-3 秒的延迟，直到它变得饱和。

我的代码是:

.image2{
    max-width:70%;
    border-radius: 5px;

    filter: grayscale(1);
    -webkit-filter: grayscale(1);
    -moz-filter: grayscale(1);
    -o-filter: grayscale(1);
    -ms-filter: grayscale(1);
}
.image2:hover{
    filter: saturate(500%),2s;
    -webkit-filter: saturate(500%);
    -moz-filter: saturate(500%);
    -o-filter: saturate(500%);
    -ms-filter: saturate(500%);
}

我尝试使用 transition-delay 和其他几个但都没有用。

感谢您的回答:)

Answer 1

你需要的是transition-delay :

.image2 {
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
    -webkit-transition-delay: 3s;
    transition-delay: 3s;
}

这真的很简单:当元素的某个 CSS 属性发生变化时，在应用更改之前，浏览器将检查是否为该特定 CSS 属性设置了任何 transition。如果有，浏览器将检查 transition-delay。但是如果没有设置transition，就没有什么可以延迟的，所以transition-delay是没有用的。

在上面的示例中，过渡本身设置为 0.4 秒，它将在您悬停后 3 秒开始(但请注意，您需要将元素悬停 3 秒，否则过渡将被取消)。

我在 classic 中添加了 3 秒的 transition-delay filter example了解它的所有行为。