CSS3 在页面加载时淡入，几秒钟后淡出

Question

我一直在StackOverflow周围寻找答案，但在我看来，这以前没有受到质疑。

如果我可能在某处错过了答案，请原谅，但它在这里：

所以我正在处理一个在页面加载时淡出div 的页面，现在我想在几秒钟后淡出它。 我似乎找不到正确的方法来完成这项工作。

@-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;
}

该网页：

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

Answer 1

您的问题源于同时应用您实际上想要按顺序运行的两个动画。要使其可靠地工作，您有两种选择：

仅限 CSS：http://jsfiddle.net/marionebl/M9LR6/

注意 opacity: 0;在动画完成时隐藏消息。另外：这在IE <= 9中不起作用，它不支持关键帧动画：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。

.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);

Answer 2

一个元素只能使用一个动画：http://jsfiddle.net/maximgladkov/YR5UM/

@-webkit-keyframes fade {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
div {
    width: 400px;
    margin: 0 auto;
    text-align: center;
    -webkit-animation: fade 6s;
    -webkit-animation-fill-mode: both;
}

Answer 3

您是否尝试过这种形式的延迟？

transition-delay: 2s;
-webkit-transition-delay: 2s; /* Safari */

或：

animation-delay:2s;
-webkit-animation-delay:2s; /* Safari and Chrome */

Answer 4

使用 Jquery animate。

$(document).ready(function(){
$('.div').delay(2000).animate({opacity:100},1000)
})

当页面加载时，这将延迟 2 秒，然后div 将淡入。