CODEWITHSUNDEEP
javascriptcsssvgfiltertransition
Douglas Landmesser
Douglas Landmesser

Reputation: 15

smooth opacity transition on an element with a filter applied

so I have a DIV with a blur filter applied to it. I am trying to "fade in" the DIV using CSS opacity (0 to 1) over a one second transition. The DIV does fade in, but it is very glitchy. I tried increasing the transition time, but it still glitches between blurred states. any idea how to smooth this transition? here is the code I am using:

SVG code:

<svg>
<filter id="blur-effect-1">
<feGaussianBlur stdDeviation="15" />
</filter>
</svg>

CSS code:

#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 creates the transition:

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

This may just be a limitation of the browser. I am testing in firefox 27 currently. thanks in advance.

doug

Upvotes: 0

Views: 868

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101800

A stdDeviation of 15 is very large. That is the equivalent to a blur radius of 45. That means for every pixel in the div, it is doing 4 x (45 + 45)^2 multiplications. For a div that is 80% of the page (I am guessing from your CSS), that could be something like 800 x 800 x 4 x 90^2. Assuming my maths is correct, that's over 20 billion calculations per step of the opacity transition. Even with graphics hardware, that probably isn't going to be that smooth.

There are possible alternatives. You could draw the blurred div into a canvas and then fade that. See

converting div and its associated elements to canvas jquery?

or

http://html2canvas.hertzen.com/

Upvotes: 1

Related Questions