Question

我正在尝试设置CSS过滤器的动画，但无法找到有关正确过渡属性的任何信息。它们是什么？

Answer 1

-webkit-transition : -webkit-filter 500ms linear

适用于webkit。我不知道FF或Opera中的过滤器支持。

我不确定我完全理解你的问题。

Answer 2

这就是我正在使用的。对于Mozilla来说，第二个对我有用，但是在我的来源中我发现它带有-moz-前缀，所以保持两者都没有坏处。

-webkit-transition: 1s -webkit-filter linear;
-moz-transition: 1s -moz-filter linear;
-moz-transition: 1s filter linear;
-ms-transition: 1s -ms-filter linear;
-o-transition: 1s -o-filter linear;
transition: 1s filter linear, 1s -webkit-filter linear;

Answer 3

如果您使用transition（无速记-webkit-）和transition-property等属性，则支持transition前缀不含filter的Chrome的最新版本仍然需要-webkit-前缀，你需要混合没有前缀和前缀的代码：

transition-property: width, left, transform, box-shadow, filter, -webkit-filter;

请注意filter属性已使用-webkit-filter重复。这对于不使用前缀的浏览器是必需的，比如Firefox，在这种情况下会忽略-webkit-filter。

Answer 4

检查过滤器属性中是否有不同的值：

错误

.link-image {
    transition: 0.3s;
    filter: brightness(80%);
}

.link-image:hover {
    transition: 0.3s;
    filter: brightness(10);
}

正确

.link-image {
    transition: 0.3s;
    filter: brightness(80%);
}

.link-image:hover {
    transition: 0.3s;
    filter: brightness(100%);
}

css过滤器是否有可动画的过渡属性？

4 个答案: