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

Download Now: Free Website Design Inspiration
Jamie Juviler
Jamie Juviler

Published:

When done right, animation can bring your website to life and increase engagement. But if it goes wrong, it can be nauseating. One popular type of animation that can help your site stand out is the opacity transition CSS. Nearly any brand can use it, as this fade transition is versatile. This effect allows your images or text to appear or disappear gradually. Plus, you can decide whether you want to use it on images or text, scroll or hover. 

text fade: css faded text illustration, opacity transition CSS

Get Inspired: 77 Examples of Exceptional Web Design  [Free Download]

I’m here to walk you through everything you need to know about this transition. The good news is that it’s fairly easy to implement thanks to Cascading Style Sheets (CSS) — a coding language used to enhance the appearance of your website. 

CSS Fade Transition

With the CSS fade transition, an element — an image, text, or background — gradually appears or disappears on the page. This stylistic effect can grab the attention of site visitors, which is why it’s an impactful addition.

You'll use either the transition or animation property in CSS to create these effects. When using the transition property, you can only 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. To specify the div to change from red to blue to purple to pink, you’ll use the animation property. 

Additionally, CSS transitions require a trigger — like a visitor hovering over an element. Animations, on the other hand, 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.

Like fade transitions in movies, CSS fade transitions and animations work better on certain websites than others. I’ll share why you’d add a fade-in animation to your website. 

We're committed to your privacy. HubSpot uses the information you provide to us to contact you about our relevant content, products, and services. You may unsubscribe from these communications at any time. For more information, check out our Privacy Policy.

Free Website Design Inspiration Guide

77 Brilliant Examples of Homepages, Blogs & Landing Pages to Inspire You

  • Agency Pages
  • Ecommerce Pages
  • Tech Company Pages
  • And More!
Loading your download form

You're all set!

Click this link to access this resource at any time.

Access now
Learn more

Why add fade-in animation to your website?

Adding CSS animation to your website is most successful when it’s an effect you decide to integrate into your site early on. It’s not something you throw into the mix just to add some flashiness to your website. 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.

I encourage you to view every design choice you make through the lens of, “How does this contribute — or detract — from the user experience (UX)?” This should definitely be considered when thinking about whether or not to add an opacity transition CSS style. 

For instance, the purpose of website animation can transcend beyond aesthetics. Animation can improve your website's flow 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 and loading animations, to name a few. (Want inspiration? Check out dozens of 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.

I’ll walk you 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. Because of this, the opacity transition CSS is an impactful addition to a site — when done correctly. 

The element will gradually appear on the page when transitioning from completely transparent to completely opaque. That's called a fade-in animation. It can be used on images, text, and other page elements such as buttons.

CSS Transition Opacity Troubleshooting

If you're having trouble with CSS transition opacity, it's a good idea to make sure you are applying proper syntax. By doing so, you can ensure that your styling rules will be properly applied to your elements.

Fade-in Image Transition Using CSS

To demonstrate opacity transitions, I’ll show you a fade-in image transition. Here, an image goes from transparent to full opacity over the course of a few seconds:

example of fade in image transition using css opacity

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.

fade-in text transition using cssHere’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. You can apply this 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.

example of CSS fade-in transition on hover

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.

 

We're committed to your privacy. HubSpot uses the information you provide to us to contact you about our relevant content, products, and services. You may unsubscribe from these communications at any time. For more information, check out our Privacy Policy.

Free Website Design Inspiration Guide

77 Brilliant Examples of Homepages, Blogs & Landing Pages to Inspire You

  • Agency Pages
  • Ecommerce Pages
  • Tech Company Pages
  • And More!
Loading your download form

You're all set!

Click this link to access this resource at any time.

Access now
Learn more

 

CSS Fade-in Transition on Scroll

If you want to add a fade-in animation with scrolling, it’s a little more complicated, but I’ll give you the resources you need to get it done.

The reason this is more complicated is because your page has to detect when the user scrolls. To do this, you’ll need to use not only CSS, but also JavaScript. JavaScript will register the scroll, and then trigger CSS to adjust the animation.

example of a css fade-in transition on a scroll

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. In the example above, we also added some styling to the h1 like color, text-align, and font-weight.

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 declaration opacity: 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). You can place it in the <head> section or before the closing </body> tag. 
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");     }   } });

The great news is that adding these impressive animation effects to your site is simple with basic working knowledge of JavaScript. 

CSS Fade Background Transition

Another lower lift option is to create a fade background color transition that doesn’t require your user to scroll down the page. To do this, you’ll use the CSS animation property to style the body element.

Here’s an example. As you can see, I set the background to transition from yellow to green over the duration of six seconds.

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

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 to use 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. By following these rules, you can ensure that you’re implementing meaningful animations on your site. 

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

examples of brilliant homepage, blog, and landing page design

Topics: CSS Animation

Related Articles

We're committed to your privacy. HubSpot uses the information you provide to us to contact you about our relevant content, products, and services. You may unsubscribe from these communications at any time. For more information, check out our Privacy Policy.

77 of blog and website page design examples.

CMS Hub is flexible for marketers, powerful for developers, and gives customers a personalized, secure experience

START FREE OR GET A DEMO