Improve
The fade-in effect is used to create an animation effect on an element in a web page. This makes our webpage more interactive and increases engagement. There are several methods to apply fade-in animation in CSS. In this guide, we will cover methods to apply the fade-in effect in CSS with examples and their explanation.
To achieve a fade-in effect on page load, set the element’s initial opacity to 0 in your CSS. Apply a transition to the opacity property with a specified duration for a smooth fade-in as the page loads. Use animation and transition property to create a fade-in effect on page load using CSS.
Why add Fade-in Effect to your webpage
There are many benefits of using CSS fade animation while building a webpage. Some of the advantages of using fade animation CSS are:
- It enhances the UX (user experience) of the webpage.
- Fade-in effect can also be used to mask content loading by gradually displaying content as it becomes available.
- CSS fade effect adds dynamism and visual interest to a webpage.
- Using fade-in animations can help users focus on specific elements, helping users to prioritize information.
How to Create CSS Fade Transition
There are two ways to create a fade-in animation in CSS:
Table of Content
- Using CSS animation property
- Using the transition property
Using CSS animation property to create fade-in effect
To create a fade-in effect using CSS animation, define two keyframes with opacity settings (0 and 1). Apply the animation to the body tag with the ‘ease’ type for a smooth transition. This animation, triggered on page load, provides a gradual fade-in appearance. Adjust the duration using the animation property.
Syntax:
body {
animation: fadeInAnimation ease 3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
@keyframes fadeInAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Example: This example shows how to create a fade-in effect on page load using CSS animation property.
<!DOCTYPE html><html><head> <title> To create fade-in effect on page load using CSS </title> <style> body { animation: fadeInAnimation ease 3s; animation-iteration-count: 1; animation-fill-mode: forwards; } h1 { color: green; } @keyframes fadeInAnimation { 0% { opacity: 0; } 100% { opacity: 1; } } </style></head><body> <h1>GeeksForGeeks</h1> <b> How to create fade-in effect on page load using CSS </b> <p> This page will fade in after loading </p></body></html>
Output:
Using the transition property to create a fade-in effect
In this method, the body can be set to the opacity 0 initially and the transition property is used to animate this property whenever it is changed. When the page is loaded, the opacity is set to 1 using the onload event. Due to the transition property, changing the opacity now will appear to fade on the page. The time of the fade-in can be set in the transition property.
Syntax:
body {
opacity: 0;
transition: opacity 5s;
}
Example: This example shows how to create a fade-in effect on page load using the CSS transition property.
<!DOCTYPE html><html><head> <title> To create fade-in effect on page load using CSS </title> <style> body { opacity: 0; transition: opacity 3s; } h1 { color: green; } </style></head><body onload="document.body.style.opacity='1'"> <h1>GeeksForGeeks</h1> <b> How to create fade-in effect on page load using CSS </b> <p> This page will fade in after loading </p></body></html>
Output:
CSS is the foundation of webpages and is used for webpage development by styling websites and web apps. You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.
Summing Up
Adding a fade-in effect to your static elements adds life to your webpage. Fade CSS animation is a simple yet effective technique to increase UX and engagement on your website.
In this guide, we have covered two methods to add fade-in effect/animation using CSS properties. We have explained CSS codes and examples to properly demonstrate how to apply the fade-in effect to your website.
Last Updated : 15 Mar, 2024
Like Article
Save Article
Share your thoughts in the comments
