CSS淡入淡出

我目前有下面的代碼淡入頭中。我想讓標題停留大約3秒鐘，然後淡出，自動加載網站的主頁面。這似乎很難做到。誰能幫忙？CSS淡入淡出

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

來源

2014-10-28 user3595963

嘗試......動畫時間應7秒

它超過2秒淡入，停留3秒鐘，然後2秒鐘以上

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

淡出JSfiddle Demo (Chrome)

來源

2014-10-28 14:59:43

謝謝！但是如何在淡出後自動更改主頁面？ – user3595963 2014-10-28 15:58:37

我不確定你所得到的是不是主頁上的標題？無論哪種方式，你都需要javascript。 – 2014-10-28 16:00:48

沒有。標題在一個頁面上是獨立的。當它淡出時，我希望它自動顯示另一個html頁面，有點像過渡到另一個頁面 – user3595963 2014-10-28 16:09:41

回答

相關問題