CSS 3 过滤器（模糊）不使用过渡持续时间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23549967/
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
CSS 3 filter (blur) not using transition duration
提问by Chris Sobolewski
I found this neat technique for cross-browser blurring. But it didn't look like the transition was having an effect, so I forked it and set the transition time and blur amount way up, and sure enough it's happening instantly.
我发现了这种跨浏览器模糊的巧妙技术。但是看起来过渡没有效果，所以我分叉了它并设置了过渡时间和模糊量，果然它立即发生。
img.blur {
-webkit-filter: blur(30px); -moz-filter: blur(30px);
-o-filter: blur(30px); -ms-filter: blur(30px);
filter: url(#blur); filter: blur(30px); filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
-webkit-transition: 2s -webkit-filter linear;
-moz-transition: 2s -moz-filter linear;
-o-transition: 2s -o-filter linear;
transition: 2s filter linear;
}
http://codepen.io/CSobol/pen/LGCiw
http://codepen.io/CSobol/pen/LGCiw
Does transition: filternot work with blur for some reason?
难道transition: filter不是模糊出于某种原因？
回答by Michael Mullany
Transition has been unprefixed, but filter has not, so the transition is over-riding the webkit-transition, but then doesn't know what to do with the unprefixed filter. This amendment works:
过渡没有前缀，但过滤器没有，所以过渡覆盖了 webkit 过渡，但不知道如何处理无前缀的过滤器。该修正案有效：
transition: 2s -webkit-filter linear;
过渡：2s -webkit-filter 线性；
回答by J Haagsman
Did you mean like this?
你是这个意思吗？
transition: 1s filter linear;
-webkit-transition: 1s -webkit-filter linear;
-moz-transition: 1s -moz-filter linear;
-ms-transition: 1s -ms-filter linear;
-o-transition: 1s -o-filter linear;
