CODEWITHSUNDEEP
javascriptjqueryhtmlcssanimation
vuffer
vuffer

Reputation: 166

How to make preload animation disappear in 3s in Javascript

I have this preload animation that I want to incorporate into my website. All I want to do is play the animation for 3 seconds upon the page loading and then make it fade out. I've already successfully made it fade out by assigning transition property to CSS. All I need is the piece of code that delays it for 3s. I know it's something to do with the setTimeout() method but I think I'm not using it right.

This is what I've got so far: 

<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>

I know the CSS is somewhat irrelevant but anyway, here it is: 

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

Upvotes: 0

Views: 234

Answers (1)

guest271314
guest271314

Reputation: 1

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

Set animation-delay to 3s at CSS

Upvotes: 1

Related Questions