Delayed blur-filter with transition in CSS3

Question

I need to do first a faded blur on a element with a delay of the transition after loading. Second another element should be faded in. I'm using animate.css.

I'm 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;
}

With this, the delayed fade-in of the inputField works great. The target gets also blurred. But this blur is not animated and not delayed.

Answer 1

As mentioned in comments, the code in question was adding a transition and a transition-delay to the target element but there was no change of state for a transition to happen.

Transition can happen only when there is a change of state either due to user interaction like :hover , :focus etc or due to scripting like addition of a class on click or time out etc. Hence, transitions are not suited for your purpose and you should consider using animation instead. Animations can start automatically on page load unlike transition .

For an element to be blurred after a 1s delay on page load, set the original state of the element to the unblurred state and then animate it to the blurred state like in the below snippet.

 #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're not specifically asking for a CSS/HTML only solution, here's a way to get what you want by adding some jquery to the mix.

<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> 

Needless to say, make sure the animations are working as you want them. This is just for the delay, after pageload. From here it's pretty easy to build upon that aswell. Like adding the animation when the user has scrolled to the element, etc. etc.

Updated for #target