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:

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.
Click Here to Subscribe to HubSpot's Website Blog

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 on 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 The Main Difference Between CSS Animations & Transitions 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's 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. 

Fade-in Image Transition Using CSS

One of the most popular uses of fade-in animation is in conjunction with images. In these instances, an image will go from transparent to full opacity. Let's take a quick look at the CSS opacity property before diving into the example.

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. 

example of fade in image transition using css opacity

Here's a code example for making this happen:

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

Within this code, there are several variables you can adjust to create the desired outcome.

One of the first you might adjust is the animation property (currently set at 5 seconds) to any amount of time you desire.

You’ll also notice "-webkit", "-moz", "-o", and "-ms" — they’re vendor-prefix properties. These properties make it so that your fade-in animation code works across various browsers and rendering engines.

For example, "-webkit" is for Chrome, Safari, and almost all iOS browsers.

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.

fade-in text transition using cssHere’s the code to add to your CSS:

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

The primary difference between this code and the code used for achieving a fade-in animation effect with images is that it includes text properties, such as font-size, font-family, and color.

Use the fade-in-text class on any HTML element you want to style in this way. 

CSS Fade-in Transition on Hover

A more interactive way to incorporate a fade-in animation effect involves hover functionality. 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 two seconds when a user hovers over it.

example of CSS fade-in transition on hover

Use this CSS code:

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

CSS Fade-in Transition on Scroll

Using fade-in animation with scrolling is a little more complicated in that you’ll have to also use JavaScript.

The JavaScript will register the scroll, triggering the CSS to adjust the animation.

example of a css fade-in transition on a scroll

The CSS portion of 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.

For the JavaScript aspect, you’ll want to plug in this code:

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

CSS Fade Background Transition

You could create a fade background color transition effect that wouldn't require the user to scroll down the page or you to write JavaScript. Instead, you'd use the CSS animation property to style the body element.

For example, you could set the background to transition from a light yellow color to a darker green over the duration of six seconds — and then have it start over and repeat. 

example of a css fade background transition from yellow to green color

Here's the CSS code you'd use:

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

Create Fade-in Animation on Your Website

Fade-in animation can be a powerful tool in 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 to 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.

hubspot website blog

Originally published Apr 8, 2021 7:00:00 AM, updated May 12 2021

Topics:

CSS Animation