How to Create a Fade-In Effect on Page Load in CSS

1. Use the animation Property and the @keyframes Rule to Create a Fade-In Effect in CSS
2. Use the animate() JQuery Method to Create a Fade-In Effect in CSS

The fade-in effect increases the opacity of the element from hidden to visible. The opacity of the selected element will change in the given time.

This tutorial will introduce methods to achieve such an effect while loading the page in CSS.

Use the animation Property and the @keyframes Rule to Create a Fade-In Effect in CSS

We have known a little about the fade-in effect.

This method will use the animation property along with the @keyframes rules to achieve a fade-in effect while the page loads. First, let’s understand how the animation property works.

When an element’s style changes from one style to another in time, we can tell that it is an animation. The animation property is the shorthand of the properties like animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, and animation-direction in order.

We can use the animation property to specify only the animation-name and animation-duration properties to create a fade-in effect. The @keyframes rule is used to change the CSS styles of the selected elements gradually.

As a result, an animation effect will be created. We use the animation-name property’s value in the @keyframes rule to select the animation to apply the gradually changing styles.

Inside the @keyframes rule, we use the selectors like to and from to apply the styles. The to and from selectors are equivalent to 0% and 100%.

The styles applied with the to selectors will gradually change to those applied with the from selectors. The change will occur along with the time specified with the animation-duration property.

To create a fade-in animation, we can change the opacity of the page from 0 to 1 using the selectors in the @keyframes rule. The syntax of the @keyframe rule is shown below.

@keyframes animation-name {
    keyframes-selector {
        css-styles;
    }
}

For example, write some texts inside a p tag in HTML.

In CSS, select the html tag and set the animation property to fadein 2s. Here, fadein is the animation-name and 2s is the animation-duration.

Next, select the animation-name fadein with the @keyframes keyword as shown in the syntax above. Write 0% as the first keyframes selector and set the opacity property to 0.

Similarly, write the other two keyframe selectors as 50% and 100% and set opacity to 0.5 and 1, respectively.

Here, when the page loads, the text will be less visible at the first as the opacity is set to 0. Gradually, the opacity will change, and the text will appear visible within two seconds.

Hence, we can use the animation property to create a fade-in effect.

Example Code:

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

body {
    animation: fadein 4s; 
}
@keyframes fadein {
    0% {
        opacity:0;
    }
    50%{
        opacity:0.5;
    }
    100% {
        opacity:1;
    }
}

Use the animate() JQuery Method to Create a Fade-In Effect in CSS

This method will discuss another approach using jQuery to create a fade-in effect in CSS.

We can use the animate() method in jQuery to achieve our goal. The animate() performs the gradual change in the style of the selected element to create an animation effect.

We can specify the CSS styles and provide the animation’s speed. The syntax of the animate() method is shown below.

(selector).animate({css - styles}, duration, easing, callback)

When we use the animate() method, the default style of the selected element will be overridden with the styles specified in the method.

We will use the same text in the HTML as in the first method for demonstration purposes. First, select CSS’s body tag and set the opacity property to 0.

Next, select the body tag in jQuery and invoke the animate() method. Inside the method, set the opacity to 1 in the styles and set the duration to 2000.

In the example below, the 2000 equals two seconds which is the duration of the animation. Initially, when the page loads, its opacity is 0, and within two seconds, it changes to 1.

In this way, the fade-in effect is achieved using jQuery.

Example Code:

body {
    opacity: 0;
}

$('body').animate({'opacity': '1'}, 2000);

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>