如何使預加載動畫在Javascript中以3s消失

我有這個預加載動畫，我想將其合併到我的網站。我想要做的就是在頁面加載時播放動畫3秒鐘，然後使其淡出。通過將轉換屬性分配給CSS，我已經成功地淡化了它。我需要的只是一段延遲3秒的代碼。我知道這與setTimeout（）方法有關，但我認爲我沒有正確使用它。如何使預加載動畫在Javascript中以3s消失

這是我到目前爲止有：

<div class="spinner-wrapper" id="fds"> 
<div class="spinner"></div> 
</div> 


    <script> 
    var preloader = document.getElementById("fds"); 
    function fadeOut() { 
     preloader.style.opacity = "0.0"; 
     setTimeout(fadeOut(), 5000); 
    } 
    </script>

我知道CSS是有點不相干，但無論如何，在這裏它是：

.spinner-wrapper { 
position: fixed; 
top: 0; 
left: 0; 
right: 0; 
bottom: 0; 
background-color: #ff6347; 
z-index: 999999; 
transition: 2s; 
} 

.spinner { 
    width: 40px; 
    height: 40px; 
    background-color: #333; 

    position: absolute; 
    top: 48%; 
    left: 48%; 
    -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out; 
    animation: sk-rotateplane 1.2s infinite ease-in-out; 
} 

@-webkit-keyframes sk-rotateplane { 
    0% { -webkit-transform: perspective(120px) } 
    50% { -webkit-transform: perspective(120px) rotateY(180deg) } 
    100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) } 
} 

@keyframes sk-rotateplane { 
    0% { 
    transform: perspective(120px) rotateX(0deg) rotateY(0deg); 
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
    } 50% { 
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); 
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
    } 100% { 
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); 
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); 
    } 
}

來源

2017-08-12 Stefan Vujic

所有我需要的是一塊的代碼，其延遲3秒

設置animation-delay到3s在CSS

來源

2017-08-12 23:25:08 guest271314

仍然相同 –

@StefanVujic不知道這是如何可能的。你試圖推遲CSS'動畫'，是嗎？ – guest271314

是的，我在css文件中設置動畫延遲爲3秒，就像你告訴我的，動畫立即開始：/ –

如何使預加載動畫在Javascript中以3s消失

回答

相關問題