CSS3中带过渡的延迟模糊滤镜

正如在注释中提到的，所讨论的代码是向target元素添加transition和transition-delay，但没有改变状态以发生转换。

只有当由于用户交互(如:hover, :focus等)或由于脚本(如添加类点击或超时等)而导致状态改变时才会发生过渡。因此，转换不适合您的目的，您应该考虑使用animation。动画可以在页面加载时自动启动，不像transition。

对于在页面加载延迟15秒后被模糊的元素，将元素的原始状态设置为未模糊状态，然后将其设置为to模糊状态，如下面的代码片段所示。

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

由于您并没有明确要求仅使用CSS/HTML解决方案，因此这里有一种方法可以通过添加一些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> 

不用说，要确保动画按你想要的方式工作。这只是页面加载后的延迟。从这里开始，也很容易在此基础上进行构建。比如当用户滚动到元素时添加动画，等等。

更新为#target