Delayed blur filter with transition in CSS3

Question

I need to make a blurry spot on the element first with a delayed transition after loading. The second element should disappear. I am using animate.css.

I am using animate.css.

HTML

<div class="main"> <div class="wrapper"> <div id="target" class="blur>This element has a background-image, which should be blured</div> </div> <div class="content-layer"> <input id="searchMain" class="animated fadeIn delay"> </div> </div> 

CSS

 .blur { -webkit-filter: blur(5px); -moz-filter: blur(5px); -ms-filter: blur(5px); -o-filter: blur(5px); filter: blur(5px); -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -ms-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; -webkit-transition-delay: 1s; transition-delay: 1s; } .delay { -webkit-animation-delay: 1s; -moz-animation-delay: 1s; animation-delay: 1s; } 

In this case, the delayed attenuation of the input field works fine. target also blurred. But this blur is not animated or delayed.

Answer 1

As mentioned in the comments, the code in question added transition and a transition-delay elements to the target element, but the transition did not occur.

A transition can only occur when a state changes, either due to user interaction, such as :hover :focus , etc., or because of scripts such as adding a class on click or timeout, etc. Therefore, transitions are not suitable for your purpose, and you should use animation instead. Animations can automatically start when a page loads, unlike transition .

In order for the element to be blurred after a delay of 1 s when loading the page, set the initial state of the element to an uneven state, and then leave it to blurred state, as in the fragment below.

 #target{ height: 100px; width: 500px; background: url(http://lorempixel.com/500/100); } .blur { -webkit-animation: blur 0.5s linear forwards; -moz-animation: blur 0.5s linear forwards; -ms-animation: blur 0.5s linear forwards; -o-animation: blur 0.5s linear forwards; animation: blur 0.5s linear forwards; -webkit-animation-delay: 1s; -moz-animation-delay: 1s; animation-delay: 1s; } .delay { -webkit-animation-delay: 1s; -moz-animation-delay: 1s; animation-delay: 1s; } @-webkit-keyframes blur { to { -webkit-filter: blur(5px); filter: blur(5px); } } @-moz-keyframes blur { to { -moz-filter: blur(5px); filter: blur(5px); } } @keyframes blur { to { -webkit-filter: blur(5px); -moz-filter: blur(5px); filter: blur(5px); } } 

 <div class="main"> <div class="wrapper"> <div id="target" class="blur">This element has a background-image, which should be blured</div> </div> <div class="content-layer"> <input id="searchMain" class="animated fadeIn delay"> </div> </div> 

Answer 2

Since you are not only requesting a CSS / HTML solution, here you can get what you want by adding some jQuery to jQuery.

 <div class="main"> <div class="wrapper"> <div id="target" class=">This element has a background-image, which should be blured</div><!-- Start without classes --> </div> <div class="content-layer"> <input id="searchMain" class="animated fadeIn delay"> </div> </div> <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script type="text/javascript" defer> $(function() { setTimeout(function(){ console.log('done waiting!'); // Just to verify the delay works $('#target').addClass('blur'); }, 1000); // A delay of 1000ms }); </script> 

Of course, make sure the animation works the way you want. This is just for delay, after pageload. From here it's easy to handle it. Like adding animations when a user scrolls an element, etc. Etc.

Updated for #target