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 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.
50 Free Coding Templates
- Navigation Menus & Breadcrumbs Templates
- Button Transition Templates
- CSS Effects Templates
- And more!
You're all set!
Click this link to access this resource at any time.Access now
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:
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.
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.
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:
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:
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:
4. Use the @keyframes rule paired with fadeIn. At 0%, set the opacity to 0. At 100%, set the opacity to 1.
5. Add vendor prefixes for cross-browser compatibility.
Here’s the final code:
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.
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.
Here’s the final code:
CSS Fade-in Transition on Scroll
To get the effect shown above, your code should look something like this code shared by Staffan Adolfsson 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.
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.
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).
5. Create a selector called .tag.visible and give it the declaration opacity: 1 (and, optionally, the declaration transform: translate(0, 0) if you used the transform declaration in the previous step)
6. Give each of your section elements a background color.
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.
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.
2. Use the @keyframes rule to set the initial background color and the final background color.
Here’s what the final code looks like:
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.