如何在Javascript中使预加载动画消失在3s中

我有这个预装动画，我想纳入我的网站。我想做的就是在加载页面时播放动画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>

我所需要的只是一段代码，它会延迟3秒

---

在CSS处设置为3s

仍能获得same@StefanVujic我不知道这怎么可能。您正在尝试延迟CSS动画，是吗？是的，我在CSS文件中将动画延迟设置为3s，就像您告诉我的那样，动画立即开始：/您可以创建一个JSFIDLE或plnkr来演示吗？这是过渡延迟，但足够接近：我接受答案

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