所以我有一个带有模糊滤镜的DIV。我试图在一秒钟的过渡中使用CSS不透明度（0到1）“淡入”DIV。 DIV确实淡入，但它非常微不足道。我尝试增加过渡时间，但它仍然在模糊状态之间出现故障。任何想法如何平滑这种转变？这是我正在使用的代码：
SVG代码：
<svg>
<filter id="blur-effect-1">
<feGaussianBlur stdDeviation="15" />
</filter>
</svg>
CSS代码：
#testdiv
{
background: url('images/background-buildpresentation.jpg') fixed;
border-radius: 30px;
color: white;
filter: url(#blur-effect-1);
font-family: arial;
font-size: 40px;
height: 80%;
left: 10%;
opacity: 0;
position: absolute;
top: 10%;
transition: all 1s;
width: 80%;
}
HTML code：
<div id="testdiv">Display some text here</div>
JavaScript创建转换：
setTimeout(function(){testdiv.style.opacity="1"},2000);
这可能只是浏览器的限制。我目前正在使用Firefox 27进行测试。提前谢谢。
道格
答案 0 :(得分：1)
stdDeviation为15非常大。这相当于模糊半径为45.这意味着对于div中的每个像素，它正在进行4 x（45 + 45）^ 2次乘法。对于占页面80％的div（我猜你的CSS），这可能是800 x 800 x 4 x 90 ^ 2。假设我的数学是正确的，那么不透明度转换的每一步计算超过200亿次。即使使用图形硬件，也可能不会那么顺利。
有可能的替代方案。您可以将模糊的div绘制到画布中然后淡化。参见
converting div and its associated elements to canvas jquery?
或