How to Create a Fade-In Animation with CSS
![](/images/code-with-jacob-profile-pic-teal-small.jpg)
Jacob Naryan - Full-Stack Developer
Posted: Sat Aug 05 2023
Last updated: Wed Nov 22 2023
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. If you liked this blog, check out my personal blog for more content like this.
Thanks for reading, please consider tipping some BTC if you liked the blog!
Click or scan the QR code below.
![bitcoin address for tips if you are so inclined.](/images/bitcoin-address.png)