Create transition effect between pages. Source: https://kasper.io/How-to-create-transition-effect-between-pages/

.form-label {
  font-size: 0.875rem;
  color: #4d4d4d !important;
  font-weight: normal;
}

.animate-in { animation: fadeIn .5s ease-in; }

.animate-out {
  transition: opacity .5s;
  opacity: 0;
}

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

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

Next step is to add animate-in on each page to <body> tag and after that, half of work is done - page has a nice fade in effect.

Now we only have to add fade out effect just before page unloads. To do that we need a little of JavaScript:

window.addEventListener("beforeunload", function () {
  document.body.classList.add("animate-out");
});

sheedy/Animate Pages.md