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.
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.
- Fade-in Image Transition
- Fade-in Text Transition
- Fade-in on Hover Animation
- Fade-in on Scroll Animation
- Fade Background Transition
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.
.png)
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!
Download Free
All fields are required.
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:
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:
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:
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:
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.
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:
See the Pen CSS Fade-in Transition on Hover by HubSpot (@hubspot) on CodePen.
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!
Download Free
All fields are required.
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.
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.
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.
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.
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.
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.
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:
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.
![How to Create SVG CSS Animations [+ Examples]](https://www.hubspot.com/hubfs/Google%20Drive%20Integration/svg%20css%20animation_12023.jpeg)