How to Create CSS Animation Fade In with Examples

Having a fade in animation on your website seems to be the trendy thing happening around modern web designs. Fade in animations can give you a engaging and and attention-grabbing web interaction for the user.

A few years ago animations like this can be taxing on the device, but now with CSS3 these animations are more optimised and can appear smooth and less janky.

In this article I will go through simple ways you can create CSS fade in animations on your website.

In our examples below, we will use the hover event to trigger our animations. The same concepts can be applied if you want to use different triggering events - eg such as on scroll events.

1. Basic fade in animation

To create a CSS animation fade in, you will need the following CSS properties:

• opacity - this sets the HTML element’s opacity. A opacity of 1 indicates the element is fully visible. A opacity value of 0 (zero) indicates that the element is transparent (cant be seen). Read MDN for more details on the opacity property

• transition - this is a short hand to control CSS animations - eg by defining the animation speed and the CSS property to animate. Read MDN for more details on CSS transions

div {
    transition: <property> <duration> <timing-function> <delay>;
}

• property is a CSS property we want to limit the animation to. For example, if you use font-size CSS property, then the transtion will only apply to font-size. For the lazy, people usually do all. This is not recommended, since it can cause performance issues especially on lower end devices.
• duration is the duration of the animation (in seconds)
• timing function we define the type of easing - eg easing-in-out
• delay - how much of a delay (in seconds) we will apply.

So when we want to create a fade in animation, we will use a combination of the two properties: opacity and transition.

Essentially we want to declare the element to transition from opacity equals 1 to opacity equals 0

Hover on the box below:

Html

We have the following HTML and want to fade in the heading when the user hovers over it.

<div class="container">
  <h1 class="fadeIn">Fade In</h1>
</div>

CSS

Now we can do the fade in animation using the following CSS

.fadeIn {
   opacity: 0;
   cursor: pointer;
   transition: 0.25s all ease-in-out;
}

.fadeIn:hover {
   opacity: 1;
}

2. CSS animation fade in left to right

To create a animation that fades in from left to to right we need to update our CSS to:

• transform: translate3d(-50px, 0, 0); - move the element to the left as the initial state.
• on hover, we move it to the right with transform: translate3d(0, 0, 0); - eg moving from -50px to 0

Hover on the box below:

.fadeIn {
  opacity: 0;
  transform: translate3d(-50px, 0, 0); /* ADDED - start x position as -50px */
  cursor: pointer;
  transition: 0.25s all ease-in-out;
}

.fadeIn:hover {
  opacity: 1;
  transform: translate3d(0, 0, 0); /* ADDED - move x to 0 on hover */
}

-> Explanation of the transition() function

In the above code, our transition, we define it as follows:

• 0.25s - duration of the animation to be 0.25s
• all - we allow all CSS properties to be included in the transition
• ease-in-out - our timing-function is ease-in-out

-> Why are we using translate3d()?

Translate3d function just moves a HTML element within the 3D space. So for example x, y and z coordinates. Compared to the traditional translate() function, it only moves it along the 2d space - ie the x and y coordinates.

I am using translate3d instead of the regular translate just due to good practice to be effient with performance. Translate3d offloads the rendering using the device’s GPU where the regular translate() function will use the main process and can cause janky animations.

Offloading rendering to the GPU in this scenario might not be needed but is a good habbit to get into.

Read more about translate3d on MDN

3. Fade in animation from bottom

To create a CSS animation that fades in from the bottom, we need to update our CSS with the following properties:

• transform: translate3d(0, 20px, 0); - we set this on our HTML element as when its not :hover
• transform: translate3d(0, 0, 0); - on hover, we set the HTML element to transform to zero

As an example, hover on the box below:

-> Explanation of the CSS

Similar to the animation to fade in from left to right, in this case we start the HTML element y position as 20px. On hover we move it to zero.

.fadeIn {
  opacity: 0;
  transform: translate3d(0, 20px, 0); /* ADDED - start y position as 20px */

  cursor: pointer;
  transition: 0.25s all ease-in-out;
}

.fadeIn:hover {
  opacity: 1;
  transform: translate3d(0, 0, 0); /* ADDED - move y to 0 on hover */
}

4. Fade in animation from top

Similar to the animation to fade in from bottom, in this case we start the HTML element y position as -50px. On hover we move it to zero.

Hover on the box below:

.fadeIn {
  opacity: 0;
  transform: translate3d(0, -50px, 0); /* ADDED - start y position as -50px */

  cursor: pointer;
  transition: 0.25s all ease-in-out;
}

.fadeIn:hover {
  opacity: 1;
  transform: translate3d(0, 0, 0); /* ADDED - move y to 0 on hover */
}

5. Animation fade in and out

The updated HTML and CSS are as follows:

<div class="container">
  <h1 class="fadeInOut">Fade In Out</h1>
</div>

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

.fadeInOut {
  cursor: pointer;
  animation: fadeInOutAnimation 1.5s infinite;
  animation-direction: alternate-reverse;
  animation-timing-function: ease-in-out;
}

Notes on the above fade in and out code:

• I am using @keyframes to show an alternative/ more advanced way to animate (instead of the previous transition CSS property). We are defining that at 0% frame (ie start frame), our opacity should be 0 - not visible. When we are at the 100% frame (end of the animation), the opacity is 1 (fully visible).

• animation use the @keyframe fadeInOutAnimation animation definition and animate it for 1.5 seconds infinitely.

• animation-direction - we want to alternate and reverse the animation to have a smooth fade in and out effect.

Conclusion

In this article, we went through a few examples to do fade in animations. We created a basic fade in animation with CSS, fade in from left to right animation, fade in from bottom, fade in from top and finally fade in and out animation.

To create fade in animations the two main CSS properties to use is opacity and transition. To control how the fade in appears - eg top, bottom, left to right, we also need to consider the translate3d function. Using this function we can move the HTML element on the x or y axis to give the impression that we are animation fade in from a specific direction.