JSFiddle - React, Tailwind, and code Playground

by Chris LaFrombois

HTML

<body>
  <div>
    <h1>
      This is your header.
    </h1>
    <p>
      Eleifend nec eget. Id massa quis eu vitae elit. Bibendum interdum semper. Donec libero duis.
    </p>
  </div>
</body>

CSS

@keyframes opacity {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

h1 {
  opacity: 1;
}

p {
  opacity: 1;
}

body.js-loaded h1 {
  opacity: 0;
  animation: opacity 1s;
  animation-fill-mode: forwards;
}

body.js-loaded p {
  opacity: 0;
  animation: opacity 1s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
}

JavaScript

window.addEventListener('load', (event) => {
  let body = document.querySelector("body");
  body.classList.add('js-loaded')
});