首先需要在加载后延迟转换的元素上进行淡化模糊。第二个元素应该淡入。我使用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
也变得模糊。但这种模糊不是动画而是没有延迟。
答案 0 :(得分:8)
正如评论中所述,相关代码是在transition
元素中添加了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>
答案 1 :(得分:-2)
由于您并没有特别要求提供仅支持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
进行了更新