css - Delayed blur-filter with transition in CSS3 -

i need first faded blur on element delay of transition after loading. second element should 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 background-image, should 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: 0.5s linear;        -moz-transition: 0.5s linear;         -ms-transition: 0.5s linear;          -o-transition: 0.5s linear;             transition: 0.5s linear;      -webkit-transition-delay: 1s;             transition-delay: 1s; } .delay {     -webkit-animation-delay: 1s;        -moz-animation-delay: 1s;             animation-delay: 1s; } 

with this, delayed fade-in of inputfield works great. target gets blurred. blur not animated , not delayed.

as mentioned in comments, code in question adding transition , transition-delay target element there no change of state transition happen.

transition can happen when there change of state either due user interaction :hover, :focus etc or due scripting addition of class on click or time out etc. hence, transitions not suited purpose , should consider using animation instead. animations can start automatically on page load unlike transition.

for element blurred after 1s delay on page load, set original state of element unblurred state , animate to blurred state in 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 {    {      -webkit-filter: blur(5px);      filter: blur(5px);    }  }  @-moz-keyframes blur {    {      -moz-filter: blur(5px);      filter: blur(5px);    }  }  @keyframes blur {    {      -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 background-image, should blured</div>    </div>    <div class="content-layer">      <input id="searchmain" class="animated fadein delay">    </div>  </div>