Page loading fade-in

fadein.css

@keyframes fadein {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/* Each element you want to fade in in sequence should have a incremental delay in the animation - more here: https://developer.mozilla.org/en-US/docs/Web/CSS/animation */

.site-header {
  animation: fadein .5s ease-in backwards;
}

.site-content {
  animation: fadein .5s ease-in .25s backwards;
}

.site-footer {
  animation: fadein .5s ease-in .5s backwards;
}