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;