2020-05-28 - How to use CSS to create a fade-in effect when the page loads?

Use animation and transition properties to create fade-in effects on page loads using CSS.

Method 1: Use CSS animation properties: CSS animation is defined by 2 keyframes. One sets the opacity to 0 and the other sets the opacity to 1. When the animation type is set to easy, the animation fades in and out smoothly across the page.

This attribute applies to the body tag. Whenever the page loads, this animation will play and the page will appear to fade in. The fade-in time can be set in the animation attribute.

The code is as follows:

body {
animation: fadeInAnimation ease 3s
animation-iteration-count: 1;
animation-fill-mode: forwards;
}

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

Example:

 

                                                                                                            h1>

                                                                                                                                                                                                         # This page will fade in
after loading

Method 2: Use transition attributes and when loading the body Set Opacity to 1: In this method, the body can be initially set to opacity 0 and whenever the property is changed, the transition property will be used to animate it.

When loading the page, use the onload event to set the opacity to 1. Changing the opacity will now disappear in the page due to the transition attribute. The fade-in time can be set in the transition attribute.

The code is as follows:

body {
opacity: 0;

transition: opacity 5s;

}

Example: