How to make CSS fade-in animation for HTML elements

Here's how to create CSS fade-in animation without any libraries

Posted on August 25, 2021


With the release of CSS3, you can now create a native CSS animation for animating your HTML elements.

One animation that you can create with CSS is the fade-in animation, where the element will slowly be turned from invisible to visible.

Here’s the code for CSS fade-in animation. I will explain the code below:

.fade-in:hover {
  animation-name: FadeIn;
  animation-duration: 3s;
  transition-timing-function: linear;
}

@keyframes FadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-moz-keyframes FadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes FadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-o-keyframes FadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-ms-keyframes FadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

First, a CSS rule is applied to the fade-in:hover pseudo-class so that the animation will run when the user hovers over the element with the class.

The animation that we want to make is a fade-in animation, and it can be created by slowly transitioning the opacity of the element from 0 to 1.

Animations in CSS are created using the @keyframes rule, so we put the rule inside @keyframes as follows:

  • 0% {opacity:0;} When the animation starts at 0%, set the opacity to zero
  • 100% {opacity:1;} When the animation ends at 100%, set the opacity to one

The rules above are enough to create a fade-in animation. The prefix in front of keyframe rules above are added to support older browsers as well.

Next, the @keyframes rules is applied to the class fade-in by using the animation-name property.

The animation-name property specifies the name of the @keyframes CSS rule that you want to apply to the element. t

The animation-duration property specifies the duration of the animation in seconds. In the example above, it will take 3 seconds for the animation to go from 0% to 100%.

The last property transition-timing-function is to control the acceleration speed of the animation effect. The linear value means the animation will be done at a constant speed.

You can put other values in the transition-timing-function such as:

  • ease - the animation will speed up towards the middle of the transition then slows again
  • ease-in - the animation starts slowly and then speeds up
  • ease-in - the animation starts fast and then slows down until the end
  • ease-in-out - like ease but with a different precise value

But if you don’t have any preference, then linear will be a good choice because the animation will have a constant transition speed.

You can add the fade-in class to any HTML elements, including texts, lists, tables, and images.

Let’s test the animation we’ve created above in a <div> element. I will add a background color and paddings to make the element bigger:

<div
  class="fade-in"
  style="background-color: aqua; border-radius: 5px; padding: 10px"
>
  <h1>Hover on me and see the animation</h1>
</div>

Now you can see the fade-in animation each time you hover over the <div> element. Nice work 👍

Related articles:

Level up your programming skills

I'm sending out an occasional email with the latest programming tutorials. Drop your email in the box below and I'll send new stuff straight into your inbox!

No spam. Unsubscribe anytime.