css过滤器是不是有动画转换属性？

Posted 2023-03-06

【中文标题】css过滤器是不是有动画转换属性？

【英文标题】：Is there an animatable transition-property for css filters?css过滤器是否有动画转换属性？

【发布时间】：2012-08-25 00:26:34

【问题描述】：

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

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

【问题讨论】：

应该是同一个属性名吧？确保您也正确匹配前缀。

【参考方案1】：

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

在 webkit 中工作。我不知道 FF 或 Opera 中的过滤器支持。

我不确定我是否完全理解您的问题。

【讨论】：

您理解正确。显然，在撰写本文时，transition-property 仅适用于前缀，谢谢。

如果我转换 -webkit-filter，它的动画效果很好，但动画后 DIV 显示为空。我只是对 div 应用 5px 的模糊。

显然我遇到了渲染故障，因为它仅在包含模糊 div 的 div 具有已转换的左侧位置集时才会中断，但当左侧为 0px 时，模糊 div 不再消失（或如果我模糊它，然后更改它仍然显示的容器的左侧位置）。希望他们能解决这些问题！

如果我通过 javascript 更改内容或用户单击模糊按钮，模糊的 div 也不会更新。进行这些更改后，我删除了模糊，然后出现了模糊伪影！

【参考方案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;

【讨论】：

正如@AxeEffect 在他的评论中提到的那样，为了获得最新的 Chrome 支持，您应该将 -webkit-filter 属性添加到无前缀的 transition，例如 transition: 1s filter linear, 1s -webkit-filter linear;

【参考方案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 会被忽略。

【参考方案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%);