show website after css animation

Question

I'm in the process of making a website. I found this link to create a spinning animation.

I want to be able to display this animation for 4s and then have it fade to the website. I only have knowledge in html and css so it would be great if someone could please help me.

You probably want something like this: https://stackoverflow.com/questions/21993661/css-auto-hide-elements-after-5-seconds — Joshua Terrill, May 23 '17 at 03:37

score 0 · Answer 1 · answered May 23 '17 at 03:44

0

$(document).ready(function(){$("body").hide().fadeIn(1000);});

answered May 23 '17 at 03:44

James P.

16
7

1

This answer assumes they are using jQuery, which they never stated in the post or the tags. – Mark Kramer May 23 '17 at 03:58
Thanks. Good Point and Answer – James P. May 24 '17 at 18:33

score 0 · Answer 2 · answered May 23 '17 at 03:57

I'm not entirely sure what you're looking for hear but my best guess is that you want to use the answer from that question you linked as a loading image in front of a website and you want the image to fade out and the website to fade in after a specified length of time.

To perform an action after a specified length of time you use

setTimeout(function, duration)

Documentation on setTimeout

To hide/show the image/website respectively you can use something like this:

function(){
  document.getElementById("content").style.display = "block";
  document.getElementById("loading").style.display = "none";
}

Then you combine them into this:

setTimeout(function() {
  document.getElementById("content").style.display = "block";
  document.getElementById("loading").style.display = "none";
}, 4000);

You can also jQuery to be able to animate the transition:

setTimeout(function() {
  $("#content").show(1000);
  $("#loading").hide(1000);
}, 4000);

And here's a jsFiddle that demonstrates that it works.

show website after css animation

2 Answers2