在CSS3中转换的延迟模糊滤镜

Question

首先,我需要在加载后延迟转换的元素上进行淡化模糊.第二个元素应该淡入.我正在使用animate.css.

我正在使用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;
}

有了这个,inputField的延迟淡入效果很好.在target被还模糊不清.但这种模糊不是动画而是没有延迟.

Answer 1

正如评论中所提到的,有问题的代码是在元素中添加a transition和a transition-delay,target但转换发生时状态没有变化.

可能发生转换时,才会有或者是由于像用户交互状态的改变:hover,:focus等,或由于像另外一类上点击或超时等.因此,转换不适合你的目的,你应该考虑使用脚本animation来代替.动画可以在页面加载时自动启动transition.

对于在页面加载1秒延迟后要模糊的元素,将元素的原始状态设置为不模糊状态,然后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>