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)