This article will provide:
- Method 1: Fade-in Effect Using CSS animation Property
- Method 2: Fade-in Effect Using CSS transition Property
Method 1: Fade-in Effect Using CSS “animation” Property
To design a simple HTML page, add the following element on it:
- Add the “<h2>” element along with the “style” attribute. The “style” attribute contains the styling properties of the element.
- Apply the “color” property in the style attribute to define the element’s text color.
- After that, use the “<p>” element to add some text or a simple paragraph.
Below is the HTML code:
The HTML page is created successfully:
In the CSS section, to apply the fade-in effect on the page, the “animation” CSS property will be used on the “<body>” element of the HTML page.
Style “body” Element
animation: fadeInPage ease 3s;
animation-iteration-count: 1;
}
The “<body>” is applied with the following CSS properties:
- “animation” is the shorthand property that sets the animation by specifying multiple values. Here, the animation name, animation-timing-function, and animation-duration is defined.
- “animation-iteration-count” defines how many times the animation should iterate.
Apply “@keyframes” rules on “animation”
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
To define the “@keyframes” rules for the animation, mention the animation name after the @keyframes keyword. Modify the animation behavior as follows:
- At “0%” animation, the “opacity” property is assigned the value 0. It means when the animation starts, the image is transparent.
- At “100%” animation, the opacity is set to “1”, which refers to a solid color.
Output
Let’s move ahead toward the second method for applying the Fade-in effect on page load.
Method 2: Fade-in Effect Using CSS “transition” Property
Add an “onload” attribute within the “<body>” element. This event is triggered on page load. On load, the opacity of the body element is set to “1”, which relates to a solid color:
In this example, the CSS “transition” property is utilized to add a fade-in effect:
opacity: 0;
transition: opacity 6s;
}
Following is the explanation of the above-stated properties:
- “opacity” property defines the transparency of the elements.
- Using CSS “transition”, gradually change the values of properties over a specified time.
Output
We have taught you the methods for using CSS for a fade-in effect on page load.
Conclusion
Several CSS properties can be utilized to apply a fade-in effect on HTML elements. More specifically, the “animation”, “opacity”, and “transition” properties can be used to specify animated effects on pages or elements. The animations are adjusted by using the “@keyframe” rules. This article has explained the methods to add a fade-in effect on page load using CSS.
