css 过滤器有动画过渡属性吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12194115/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there an animatable transition-property for css filters?
提问by 0skar
I'm trying to animate CSS filters but can't find any information on the correct transition properties. What are they?
我正在尝试为 CSS 过滤器设置动画，但找不到有关正确过渡属性的任何信息。这些是什么？
Here's an example: http://jsbin.com/onijim/3/
这是一个例子：http: //jsbin.com/onijim/3/
回答by mddw
-webkit-transition : -webkit-filter 500ms linear
works in webkit. I don't know about filter support in FF or Opera.
在 webkit 中工作。我不知道 FF 或 Opera 中的过滤器支持。
I'm not sure I wholly understand your question.
我不确定我是否完全理解你的问题。
回答by Karl Adler
That's what I'm using. For Mozilla the 2nd is working for me, but in my sources I found it with the -moz- prefix, so it doesn't hurt to keep both.
这就是我正在使用的。对于 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;
回答by AxeEffect
On last versions of Chrome which support transitionwithout -webkit-prefix, if you are using transition-property(no shorthand transition) and properties like filterwhich still needs -webkit-prefix you need to mix unprefixed and prefixed code:
在支持transition无-webkit-前缀的最新版本的 Chrome 上，如果您正在使用transition-property（无速记transition）和filter仍然需要-webkit-前缀的属性，您需要混合无前缀和带前缀的代码：
transition-property: width, left, transform, box-shadow, filter, -webkit-filter;
Note that the filterproperty is repeted with -webkit-filter. This is needed for browsers which do not use prefix, like Firefox, which in that case -webkit-filteris ignored.
请注意，该filter属性用 重复-webkit-filter。这对于不使用前缀的浏览器是必需的，例如 Firefox，在这种情况下会-webkit-filter被忽略。
