Javascriptで3秒間にプリロードアニメーションを消す方法

Question

私はこのプリロードアニメーションを自分のウェブサイトに組み込みたいと思います。私がしたいのは、ページの読み込み時に3秒間アニメーションを再生してからフェードアウトさせることだけです。私は既にCSSにトランジションプロパティを割り当てることで、それをうまくフェードアウトさせることに成功しました。私が必要とするのは、それを3秒間遅らせるコードです。私はそれがsetTimeout（）メソッドと関係があると知っていますが、私はそれを正しく使用していないと思います。

これは私がこれまで持っているものです：

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

Answer 1

私は必要なのは作品です3秒間遅らせるコードの

セットanimation-delayから3sのCSS