css - 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在支持无前缀的最新版本的 Chrome 中-webkit-，如果您使用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%);
}