CSS: How do I create a fade effect on page change (transition)?

The class “animate-in” must be inserted in the body.

.animate-in {
    -webkit-animation: fadeIn .1s ease-in;
    animation: fadeIn .1s ease-in;
}
.animate-out {
    -webkit-transition: opacity .1s;
    transition: opacity .1s;
    opacity: 0;
}
@-webkit-keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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