title: Delayed blur-filter with transition in CSS3
body: <p>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.</p>
  
  <p>I'm using animate.css.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>    &lt;div class="main"&gt;
          &lt;div class="wrapper"&gt;
              &lt;div id="target" class="blur&gt;This element has a background-image, which should be blured&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="content-layer"&gt;
              &lt;input id="searchMain" class="animated fadeIn delay"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>With this, the delayed fade-in of the inputField works great. The <code>target</code> gets also blurred. But this blur is not animated and not delayed.</p>