Search code examples
css-animationsfade

Page reappears after fading out

I'm trying to make a "fake" loading screen fade out into the actual page. I got the fade out animation right, however after the animation is done, the loading page reappears again. How do I fix this? ive tried changing the animation tro transition, but then it doesnt even fade out.

PS: This is an assignment and I can only use HTML and CSS

.frontpage {
  background-color: black;
  height: 100vh;
  z-index: 1; 
  animation: fadeout 3s linear;
 }

@keyframes fadeout {
    from { opacity: 1; visibility: visible; }
    to { opacity: 0; visibility: hidden; }
}

HTML:

<div class="frontpage">
<h1 align="center"> Loading ...</h1>
<div class="loader"> </div>
</div>
Solution

  • You should set the 'forwards' for the animation-fill-mode in order to stay stable.

    .frontpage {
  background-color: black;
  height: 100vh;
  z-index: 1; 
  animation: fadeout 3s linear forwards;
 }