I've been working with a DIV that has a blur filter applied to it, and I'm attempting to smoothly "fade in" the DIV using CSS opacity (going from 0 to 1) with a one-second transition. However, even though the DIV does fade in, it's quite glitchy. I've tried increasing the duration of the transition, but it still glitches between blurred states. Does anyone have any ideas on how to achieve a smoother transition? Here's the code I have been using:
SVG snippet:
<svg>
<filter id="blur-effect-1">
<feGaussianBlur stdDeviation="15" />
</filter>
</svg>
CSS snippet:
#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 snippet:
<div id="testdiv">Display some text here</div>
JavaScript for creating the transition:
setTimeout(function(){testdiv.style.opacity="1"},2000);
It seems like this issue might be related to browser limitations. I'm currently testing in Firefox 27. Any help would be greatly appreciated.
-Doug