CSS Page Load Transitions

Amanda Lucas
on
November 29, 2023

Animated page loading effects can enhance how your website is portrayed.

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.

Amanda Lucas

Amanda Lucas

Amanda Lucas runs a web design agency in Ireland called Itchy Fingers Design. She enjoys creating websites that help support business goals and growth and sharing her knowledge.