How to Add a CSS Fade-in Transition Animation to Text, Images, Scroll & Hover (2024)

Animation — when done right — brings a website to life and increases engagement.

When done wrong, it’s nauseating.

An engaging website helps accomplish business goals. With so much competing for the average consumer’s attention, you need to find ways to stand out.

Using subtle transition animation effects is one way to make an impression on a website visitor.

One popular type of animation that can be effectively used by nearly any brand is the fade transition. This stylistic effect allows for images or text on your website to gradually appear or disappear.

You can use this style for text, images, on scroll, or on hover. Here are the options we'll discuss below:

• Fade-in Image Transition
• Fade-in Text Transition
• Fade-in on Hover Animation
• Fade-in on Scroll Animation
• Fade Background Transition

The impact of fade-in animation can be powerful. Thankfully, it’s fairly easy to implement with Cascading Style Sheets (CSS) — a coding language used to enhance the appearance of your website.

CSS Fade Transition

A CSS fade transition is a stylistic effect in which an element — like an image, text, or background — gradually appears or disappears on the page.

To create these effects, you'll use either the transition or animation property in CSS. When using the transition property, you'll only be able to specify an initial state and a final state — not any intermediate points. For example, you can set a div element to transition from red to purple. But to specify the div to change from red to blue to purple to pink, you'll need to use the animation property.

CSS transitions also require a trigger — like a visitor hovering over an element — and animations do not. By default, an animation will automatically begin its sequence when the page loads. Although, you can delay its start time using the animation-delay property.

You can see how both the transition and animation properties are used in the examples below.

You can also check out to learn more.

Like fade transitions in movies, CSS fade transitions and animations work better on some websites than others. Let's look at some reasons you'd use this stylistic effect.

Why add fade-in animation to your website?

Adding CSS animation to your website shouldn’t be an afterthought. You don’t want it to be something you throw into the mix just to add some flash to your website.

Instead, every design choice must be justified in terms of what it contributes to (or detracts from) the user experience (UX).

So consider this: Since animation involves movement, it’s nearly impossible to ignore this type of design. Because of its visual prominence, you need to be thinking about how to implement it while you’re in the early stages of designing a website.

The purpose of website animation goes beyond aesthetics. Animation can be used to improve the flow of your website and create a more engaging user interface (UI).

Fade-in animation is just one of many types of animation you can implement on your website. There are hover animations, loading animations, and dozens of other animation examples. But fade-in animation, in particular, offers plenty of flexibility: you can create image fades, text fades, hovering fades, scrolling fades, and background fades.

Below we'll walk through an example of each.

CSS Transition Opacity

The CSS opacity property is used to specify how opaque or transparent an element is. Values for this property range from 0 to 1, with 0 being completely transparent and 1 being completely opaque.

When combined with the animation or transition property, you can use the opacity property to make an element change from completely transparent to completely opaque (or vice versa) over a period of time.

When transitioning from completely transparent to completely opaque, the element will gradually appear on the page. That's called a fade-in animation, and it can be used on images, text, and other page elements too.

Fade-in Image Transition Using CSS

To demonstrate opacity transitions, let’s look at a fade-in image transition. Here, an image goes from transparent to full opacity over the course of a few seconds:

Here's how to make this effect happen:

1. In your HTML, create a div with the class fade-in-image.

2. Place your image inside this div. Your HTML will look like this:

 
<div class="fade-in-image">
 <img src="source">
</div>

3. In your CSS, give your fade-in-image class the declaration animation: fadeIn 5s. You can adjust 5s to any span of time you want.

 
.fade-in-image { animation: fadeIn 5s; }

This assigns an animation called fadeIn to our div. This doesn’t do anything yet because we still need to create the effect using keyframes.

4. In the CSS, use the @keyframes rule paired with fadeIn. At 0%, set the opacity to 0. At 100%, set the opacity to 1. This creates the fade-in effect.

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

5. It’s also recommended you repeat the code above using vendor prefixes — "-webkit", "-moz", "-o", and "-ms" — to ensure cross-browser compatibility. For example, "-webkit" is for Chrome, Safari, and almost all iOS browsers. This is shown in the final code below:

See the Pen Fade-in Image Transition Using CSS by HubSpot (@hubspot) on CodePen.

You can keep reusing this CSS code with other images by using the fade-in-image CSS class within an element containing an image.

Fade-in Text Transition Using CSS

You can use the same CSS properties shared above with just a slight change to create a text fade-in effect.

Here’s how to create this effect:

1. In your HTML, create a div with the class fade-in-text.

2. Place your text inside this div. In this example, we’ll create this text as a paragraph:

 
<div class="fade-in-text">
 <p>Fade-in Text</p>
</div>

3. In your CSS, give the fade-in-text class the declaration animation: fadeIn 5s. Again, you can adjust this seconds value to any duration. Also, you can specify your font declarations here, like font-family and font-size:

 
.fade-in-text {
 font-family: Arial;
 font-size: 150px;
 animation: fadeIn 5s;
}

4. Use the @keyframes rule paired with fadeIn. At 0%, set the opacity to 0. At 100%, set the opacity to 1.

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

5. Add vendor prefixes for cross-browser compatibility.

Here’s the final code:

See the Pen Fade-in Text Transition Using CSS by HubSpot (@hubspot) on CodePen.

You can use the fade-in-text class on any text element you want to apply this effect to.

CSS Fade-in Transition on Hover

A more interactive way to incorporate a fade-in animation effect involves triggering it on mouse hover. This can be applied to text or images.

For example, you could set an image to start at 50% opacity and increase to 100% opacity over the duration of one second when a user hovers over it.

Here are the steps for this effect:

1. In your HTML, create a div with the class fade-in-image.

2. Place your image inside this div.

 
<div class="fade-in-image">
 <img src="source">
</div>

3. In your CSS, set the opacity of the fade-in-image class to 50%.

4. With the hover pseudo-class, add the declarations opacity: 100% and transition: opacity 1s.

 
.fade-in-image:hover {
 opacity: 100%;
 transition: opacity 1s;
}

Here’s the final code:

See the Pen CSS Fade-in Transition on Hover by HubSpot (@hubspot) on CodePen.

CSS Fade-in Transition on Scroll

Using fade-in animation with scrolling is a little more complicated than our previous examples. Your page has to detect when the user scrolls, and to do that you’ll need to use JavaScript. The JavaScript will register the scroll, triggering the CSS to adjust the animation.

To get the effect shown above, your code should look something like this code shared by Staffan Adolfsson on CodePen:

See the Pen fade in scroll by Staffan Adolfsson (@staffan-ad) on CodePen.

Here’s how to write it step-by-step:

1. In HTML, create four (or however many you want) section elements. Assign each section a unique class based on its color. Also, add the class tag to all section elements besides the first.

 
<section class="yellow"><h1>foobar</h1></section>
<section class="tag red"><h1>foobar</h1></section>
<section class="tag blue"><h1>foobar</h1></section>
<section class="tag green"><h1>foobar</h1></section>

2. In CSS, set the margin and padding of the body to 0.

3. Set the height of each section element to 100vh The “vh” stands for viewport height, and sets each section to take up the full height of the browser window.

 
section { height: 100vh; }

4. For all elements in the class tag, give them the declarations opacity: 0 and transition: all 1s. If you want your section elements to slide into view, you can also add the declaration transform: translate(0, 10vh).

 
.tag {
 opacity: 0;
 transform: translate(0, 10vh);
 transition: all 1s;
}

5. Create a selector called .tag.visible and give it the declarationopacity: 1 (and, optionally, the declaration transform: translate(0, 0) if you used the transform declaration in the previous step)

 
.tag.visible {
 opacity: 1;
 transform: translate(0, 0);
}

6. Give each of your section elements a background color.

 
.yellow { background-color: lightyellow; }
.red { background-color: lightcoral; }
.blue { background-color: lightblue; }
.green { background-color: lightgreen; }

7. Finally, add the following JavaScript code (note that this code example also uses jQuery). This code first detects when the user scrolls. When the user begins to scroll, the code detects the top and bottom of the viewport, then checks each tag section element for whether the tag is inside the viewport (i.e., visible on the screen).

If the section element is in view, it assigns it the class visible (which, if you’ll remember, has an opacity of 1). If the section element is not in view, it removes the visible class from this section element.

 
$(document).on("scroll", function() {
 var pageTop = $(document).scrollTop();
 var pageBottom = pageTop + $(window).height();
 var tags = $(".tag");
 for (var i = 0; i < tags.length; i++) {
 var tag = tags[i];
 if ($(tag).position().top < pageBottom) {
 $(tag).addClass("visible");
 } else {
 $(tag).removeClass("visible");
 }
 }
});

With some basic knowledge of JavaScript, making these kinds of impressive animation effects is doable, and common on a ton of websites.

CSS Fade Background Transition

You could also create a fade background color transition effect that doesn’t require the user to scroll down the page. Instead, use the CSS animation property to style the body element.

For example, you could set the background to transition from yellow to green over the duration of six seconds.

Here's how to do that.

1. In the CSS, assign three declarations to the body of the document: The initial background color, the animation, and an animation-fill-mode, which prevents the color from resetting to yellow when the animation is complete.

 
body {
 background: #FCE97F;
 animation: fadeBackground 6s;
 animation-fill-mode: forwards;
}

2. Use the @keyframes rule to set the initial background color and the final background color.

 
@keyframes fadeBackground {
 from { background-color: #FCE97F; }
 to { background-color: #2EB07B; }
}

Here’s what the final code looks like:

See the Pen CSS Fade Background Transition by HubSpot (@hubspot) on CodePen.

If you’re running into issues here, see our post on fixes when your CSS animations aren’t working.

Create fade-in animations on your website.

Fade-in animation can be a powerful tool when telling a meaningful story and improving engagement. But, don’t add unnecessary animation to your website just for the sake of using animation.

Focus on using fade-in animation to highlight certain elements and create smoother transitions, as well as improve the overall user experience of your website.

Editor's note: This post was originally published in February 2020 and has been updated for comprehensiveness.

Originally published Jun 7, 2022 7:00:00 AM, updated June 07 2022