how to create an effect just before displaying a web page

Question

hi i tested this piece of code found on stackoverflow here

without success...

I manage to use 'Swup' for the transitions but not for the arrival on the page

* {
      -webkit-transition: all .5s;
      -webkit-animation-name: myfading;
      -webkit-animation-duration: .8s;
}

@-webkit-keyframes myfading {
      from {
            opacity: 0;
            -webkit-transition: opacity;
      }
      to {
            opacity: 1;
      }
}

Answer 1

Hi you shouldn't add an Animation style to every html element with the * selector. Why don't you think about to place a fullscreen Container on top of every element and fade this Container out with a timed animation? Something like this:

.loadContainer {
    -webkit-animation-name: myfading;
    -webkit-animation-duration:.5s;
    animation-delay: 3s;
    animation-fill-mode: forwards;
    width:100%;
    height:100%;
    position:fixed;
    left:0;
    top:0;
    background:#dadada;
    display:flex;
    justify-content:center;
    align-items:center;
}

@-webkit-keyframes myfading {
    from {
          opacity: 1;
    }
    to {
          opacity: 0;
    }
}

    <div class="loadContainer">
      <span style="font-weight:bold;color:white;">LOADING WEBSITE ...</span>
    </div>
    <div class="page-wrapper">
        <h1>My Website</h1>
        <section style="min-height:100vh">
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati nesciunt dolor, vero assumenda recusandae accusantium provident et praesentium delectus sit odit suscipit modi sunt hic!
            </p>
        </section>
    </div>

Answer 2

@ChrisSchober answer is already very good. But it can lead to problems under certain circumstances. Imagine you have one or more large CSS files. They have to be loaded first. Meaning you will only start the effect when the styles are loaded. One way to avoid this would be to hide the body first until everything is loaded. Then you can fade in the body with Javascript and thus start the animation.