應用了濾鏡的元素上的平滑不透明過渡

Question

所以我在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代碼：

<div id="testdiv">Display some text here</div>

JavaScript創建過渡：

setTimeout(function(){testdiv.style.opacity="1"},2000);

這可能只是瀏覽器的限制。 我目前在Firefox 27中進行測試。 提前致謝。

道格

Answer 1

stdDeviation 15非常大。 這相當於模糊半徑為45。這意味着對於div中的每個像素，它都將進行4 x（45 + 45）^ 2的乘法。 對於占頁面80％的div（我從您的CSS猜測），可能類似於800 x 800 x 4 x 90 ^ 2。 假設我的數學是正確的，那么不透明度轉換的每個步驟要進行200億次以上的計算。 即使使用圖形硬件，也可能不會那么平滑。

有其他選擇。 您可以將模糊的div繪制到畫布中，然后使其褪色。 看到

將div及其相關元素轉換為canvas jquery？

要么

http://html2canvas.hertzen.com/