Simple boilerplate for HTML/CSS/JS page transition-CodePudding

So I have been looking online for page transitions for a while now. And each of them tutorials use a different framework like gsap or they write hundred lines of JavaScript, or just simply code multiple pages on the same index.html and use animations to load the content or just write a script on the HTML page itself. And some of those are also 20 minutes long (!) And to be honest, I'm not really interested in learning these kinds of frameworks because they each use their own kind of code and I don't have a lot of time to learn all of those.

I'm looking for something that is described as in here: How to do transition effects between two html pages

If I look at the code described in the example above, it seems that they are using styles defined in the HTML, but how can I call upon animations defined in my external CSS sheet?

What I'm looking for is the following: I have a simple logo animation on my index.html which serves as a entrance page. After 3 seconds, I want to transition automatically to a (new!) html page, home.html as example with a horizontal wipe. I know I can use the code partially from the example above, but I don't know how to specify the CSS animation in code, and how to call upon it.

Expecting: simple wipe transition without any external framework or library, from scratch

Tried: watching a lot of tutorials which are extremely confusing as most of them use way too difficult coding styles or have videos of 20-30 minutes.

CodePudding user response：

To transition automatically to a new HTML page after 3 seconds, you can use JavaScript to set a timer and redirect the user to the new page when the timer expires.

Here is an example of how you can do this:

<script>
  setTimeout(function() {
    window.location.href = 'home.html';
  }, 3000);
</script>

To create a horizontal wipe effect when transitioning to the new page, you can use CSS transitions. First, you'll need to add a CSS class to the body element of the index.html page that applies a transition effect to the transform property:

body.wipe {
  transition: transform 1s;
}

Then, you can use JavaScript to add the wipe class to the body element when the timer expires:

<script>
  setTimeout(function() {
    document.body.classList.add('wipe');
    setTimeout(function() {
      window.location.href = 'home.html';
    }, 1000);
  }, 3000);
</script>

You can also try to use a predefined animation like this:

@keyframes spin1 { 100% { transform:rotate(360deg); } }
document.body.style.animation="spin1 4s linear infinite";