[英]Delayed blur-filter with transition in CSS3
首先,我需要在加载后延迟转换的元素上做一个褪色模糊。 第二个元素应该淡入。我正在使用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
也变得模糊。 但这种模糊不是动画而是没有延迟。
正如评论中所提到的,有问题的代码是向target
元素添加transition
和transition-delay
,但转换发生时状态没有变化。
转换只有在由于用户交互而导致状态发生变化时才会发生: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>
既然你没有专门要求一个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进行了更新
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.