Animate page loading with CSS

HTML


<header>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>
<main>
  <section>
    <article>
      <h1>Main Story</h1>
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum vitae qui quia, vel adipisci explicabo sit molestias, quaerat dolorem amet, provident tempora quas impedit unde distinctio aliquam. Facilis rerum, natus deleniti nulla qui placeat rem accusamus provident odit vero. Maiores assumenda dolor corrupti expedita optio incidunt nihil fugit accusamus voluptates!</p>
    </article>
    <article>
      <h1>Another Story</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem quos, odio harum earum laboriosam nobis voluptatibus ut voluptas vel saepe deserunt molestiae quasi aliquam ullam?</p>
    </article>
  </section>
</main>





CSS



body {
  margin: 0;
  --nav-load-time: 300ms;
  --nav-link-load-time: 500ms;
  --article-load-delay: calc(var(--nav-load-time) + var(--nav-link-load-time))
}

nav {
  background-color: rgb(0, 61, 92);
  color: white;
  animation: nav-load var(--nav-load-time) ease-in;
}

nav ul {
  margin: 0;
  display: flex;
  justify-content: center;
}

nav li {
  list-style: none;
  padding: 10px;
  margin: 0 10px;
  animation-name: nav-link-load;
  animation-duration: var(--nav-link-load-time);
  animation-timing-function: ease-in;
  animation-delay: var(--nav-load-time);
  animation-fill-mode: forwards;
  transform: scale(0);
}

nav li:first-child {
  animation-name: nav-first-link-load;
  transform: translateX(-1000%);
}

nav li:last-child {
  animation-name: nav-last-link-load;
  transform: translateX(1000%);
}

nav li:hover {
  background-color: #FFFFFF44;
}

nav a {
  color: inherit;
  text-decoration: none;
}

main {
  padding: 30px;
}

h1 {
  animation: article-load 300ms ease-in var(--article-load-delay);
  animation-fill-mode: forwards;
  transform: translateY(-20px);
  opacity: 0;
}

p {
  animation: article-load 300ms ease-in calc(var(--article-load-delay) + 200ms);
  animation-fill-mode: forwards;
  transform: translateY(-20px);
  opacity: 0;
}

@keyframes nav-load {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes nav-link-load {
  0% {
    transform: scale(0);
  }

  90% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes nav-first-link-load {
  0% {
    transform: translateX(-1000%);
  }

  90% {
    transform: translateX(50%);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes nav-last-link-load {
  0% {
    transform: translateX(1000%);
  }

  90% {
    transform: translateX(-50%);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes article-load {
  0% {
    transform: translateY(-20px);
    opacity: 0;
  }

  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}














/* Background Styles Only */

@import url('https://fonts.googleapis.com/css?family=Raleway');

* {
    font-family: Raleway;
}

.side-links {
  position: absolute;
  top: 15px;
  right: 15px;
}

.side-link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  margin-bottom: 10px;
  color: white;
  width: 180px;
  padding: 10px 0;
  border-radius: 10px;
}

.side-link-youtube {
  background-color: red;
}

.side-link-twitter {
  background-color: #1DA1F2;
}

.side-link-github {
  background-color: #6e5494;
}

.side-link-text {
  margin-left: 10px;
  font-size: 18px;
}

.side-link-icon {
  color: white;
  font-size: 30px;
}