如何使预加载动画在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消失

回答

相关问题