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

Question

我正在尝试动画CSS过滤器,但无法找到有关正确过渡属性的任何信息.这些是什么？

这是一个例子:http://jsbin.com/onijim/3/

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-前缀的最新版本的 Chrome 上，如果您正在使用transition-property（无速记transition）和filter仍然需要-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%);
}