javascript - 如何在 Javascript 中使预加载动画在 3 秒内消失

Question

我有这个预加载动画，我想将其合并到我的网站中。我想要做的就是在页面加载时播放动画 3 秒，然后让它淡出。我已经通过将 transition 属性分配给 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

All I need is the piece of code that delays it for 3s

设置animation-delay到 CSS 的 3s