CSS Page Load Transitions

Page loading effects can add a nice touch to your websites.

A CSS animation is defined with 2 keyframes. One with the opacity set to 0, the other with the opacity set to 1. When the animation type is set to ease, the animation smoothly fades in the page. This property is applied to the body tag. Whenever the page loads, this animation would play and the page will appear to fade in. The time of the fade in can be set in the animation property. 

You can see it in use here on the pages on this site.

The effect only requires a few lines of CSS as follows:

body {
    animation: fadeInAnimation ease 3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
 
@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
     }
}

Adjust the properties to get the effect you want.

You can add to any plugin that lets you add CSS. I use WPCodeBox2 on all sites I build.