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

Question

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

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无法使用模糊吗？

Answer 1

过渡是没有前瞻的，但过滤器没有，所以转换超过了webkit过渡，但后来不知道如何处理未加前缀的过滤器。这项修正案有效：

  

转换：2s -webkit-filter linear;

Answer 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;