CSS FADE TRANSITION

Question

我目前有以下代码在标题中淡入淡出。我希望标题保持约3秒，然后淡出，自动加载网站的主页。这似乎很难做到。有人可以帮忙吗？

.fade1 {
    margin-top: 25px;
    font-size: 21px;
    text-align: center;

    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

Answer 1

试试这个......动画持续时间应为 7秒

它会在2秒内消失，停留3秒钟，然后在2秒内淡出

 @keyframes fadein {
        0% { opacity: 0; }
        29% { opacity: 1; }
        72% {opacity:1;}
        100% {opacity:0;}
    }

JSfiddle Demo (Chrome)