CSS 3过滤器（模糊）不使用过渡持续时间答案

【问题标题】：CSS 3 filter (blur) not using transition durationCSS 3过滤器（模糊）不使用过渡持续时间
【发布时间】：2014-06-26 07:54:00
【问题描述】：

我发现了这种巧妙的跨浏览器模糊技术。但是看起来过渡没有效果，所以我将它分叉并设置过渡时间和模糊量，果然它立即发生了。

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

transition: filter 由于某种原因不能用于模糊吗？

【问题讨论】：

看起来这个示例现在可以工作了 :-)

标签： css blur css-filters

【解决方案1】：

过渡没有前缀，但过滤器没有，所以过渡覆盖了 webkit-transition，但不知道如何处理无前缀的过滤器。此修订有效：

过渡：2s -webkit-filter 线性；

【讨论】：

您的建议已正确识别问题。但是，如果我附加它，那么过渡仅适用于 webkit 浏览器，而 FF、Opera、Safari 和 IE 则没有动画。
为每个预先固定的过滤器添加更多过渡...或完全摆脱无前缀过渡。
是的。像魅力一样工作！非常感谢第二双眼睛。在你提到它之后，我注意到这就是它正在做的事情。未来值得关注的好东西。
使用级联并将transition: 2s filter linear; 放在转换列表的顶部。

【解决方案2】：

你是这个意思吗？

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;

【讨论】：