css3在页面加载时淡入,在秒后退出 [英] css3 fade in on page load, out after seconds
问题描述
我一直在stackoverflow搜索一段时间的答案,但在我看来,这没有被质疑过。
i have been searching around stackoverflow for an answer for a while but it seems to me this isn't been questioned before.
借口如果我可能错过了回答某处,但在这里它是:
excuses if i might have missed the answer somewhere but here it goes:
所以我正在一个页面上的页面加载的淡入淡出,现在我想淡出几秒钟后。我似乎找不到正确的方法来完成这项工作。
So i am working on a page that fades in a div on page load, now i want to fade it out after a few seconds. i can't seem to find the right way to get this done.
@-webkit-keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
@-webkit-keyframes fadeout {
from {
opacity:1;
}
to {
opacity:0;
}
}
div {
width: 400px;
margin: 0 auto;
text-align: center;
-webkit-animation:fadein 1s;
-webkit-animation:fadeout 1s;
-webkit-animation-delay:fadeout 5s;
}
html:
<div>
<h1><font size="+6"> :(</font></h1><br />
<h1>Whoops<span>Something went wrong</span></h1><br />
<h1><span><div id="timer_div">you will be redirected in</div> seconds</span></h1>
</div>
推荐答案
您的问题来自于实际应用两个动画要使此工作可靠,您有两个选项:
Your issue stems from applying two animations at once that you actually want to run in sequence. To get this working reliably you have two options:
CSS only:
http://jsfiddle.net/marionebl/M9LR6/
注意 opacity:0;
,以便在动画完成时保持隐藏的消息加:这不会在IE< = 9,它不支持关键帧动画: http://caniuse.com/#feat=css-animation
Note opacity: 0;
to keep the message hidden when the animation completes. Plus: This won't work in IE <= 9, it does not support keyframe animations: http://caniuse.com/#feat=css-animation
@keyframes fadeInOut {
0% {
opacity: 0;
}
16% {
opacity: 1;
}
84% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.message {
width: 400px;
margin: 0 auto;
opacity: 0;
text-align: center;
-webkit-animation: fadeInOut 6s;
animation: fadeInOut 6s;
}
涉及JS:
http://jsfiddle.net/marionebl/P26c9/1/
有点更灵活,更容易更改,支持IE9。
Is somewhat more flexible and easier to change, supports IE9.
CSS:
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.fadeIn {
-webkit-animation: fadeIn;
animation: fadeIn;
opacity: 1;
}
.fadeOut {
-webkit-animation: fadeOut;
animation: fadeOut;
opacity: 0;
}
.fast {
-webkit-animation-duration: 1s;
animation-duration: 1s
}
.message {
width: 400px;
margin: 0 auto;
text-align: center;
}
JS:
var $message = $('.message');
$message.addClass('fadeIn fast');
setTimeout(function(){
$message.removeClass('fadeIn').addClass('fadeOut');
}, 5000);
这篇关于css3在页面加载时淡入,在秒后退出的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!