How to Create a Fade-In Animation with CSS

Creating a fade-in animation with CSS is actually very simple with keyframes and the animation style. In this tutorial, I will show you how to make a simple fade-in animation with just HTML and CSS. No JavaScript is required!

1. Create an HTML Element

To create a fade-in animation with CSS and HTML, start by creating an HTML element. This could be anything from a <div> to a <p> tag—whatever makes sense for your project. For this example, let's use a <div> tag:

<div></div>

2. Add CSS Styling to the Element

Next, add appropriate styling to the HTML element. This can include anything from font size and color to background images and margins. For this example, let’s add a black background color, a white font color, and center the text:

div { 
  background-color: #000;
  color: #fff;
  text-align: center;
}

3. Set an Initial Opacity for the Element

To create the animation effect, we’ll need to set an initial opacity for the element of 0. This will make the element effectively invisible when it first loads on the page:

div { 
 background-color: #000;
 color: #fff;
 text-align: center;

 /* Set opacity to 0 */  
 opacity: 0;  
}

4. Create the Animation Keyframes

Now that we have our starting point, we can create the animation keyframes that will make up our fade-in effect. To do this, we’ll use the @keyframes rule in CSS. The from rule specifies the starting point of our animation while the to rule specifies the end point:

@keyframes fadeIn {  
   from {  
       opacity:0;  
   }  

   to {  
       opacity:1;  
   }  
}

5. Add Animation Properties to the Element

The next step is to add the necessary animation properties to our HTML element. These properties will tell our element when and how long to animate for. We’ll use the animation property here and specify that we want our animation to last 2 seconds and have an ease-in timing-function:

div { 
 background-color: #000;  																  /* Set initial properties */
 background-color: #000;
 color: #fff;
 text-align: center;
 opacity: 0;
    
 /* Add animation properties */
 animation: fadeIn 2s ease-in; 
}

6. Enjoy Your Fade In Animation!

That’s it! Once you’ve saved your changes, you should now have a beautiful fade-in animation when your HTML element loads on the page. Enjoy!

Thank you for reading. Check out more tutorials about software engineering here.