5 Ways to make css fade in transitions to text & images

Animation adds a dynamic touch to websites, elevating user engagement when used judiciously. However, when done poorly, it can be overwhelming. An effective website is a crucial asset for achieving business goals, and amidst the digital noise, finding ways to stand out is key.

One impactful animation style that suits various brands is the fade transition. This stylistic effect gracefully introduces or removes elements like text or images on your website.

It’s subtle, elegant, and, fortunately, easily implementable using Cascading Style Sheets (CSS), a language that enhances the visual appeal of your site, almost as if you were dealing with Canvas Photo Prints.

You may read: How to Trademark a Brand Name in 3 Simple Steps

CSS Fade Transition

A CSS fade transition involves an element, be it an image, text, or background, gradually appearing or disappearing on the page. To achieve this effect, you’ll utilize either the transition or animation property in CSS. Transition enables you to specify only initial and final states, while animation allows for intermediate points.

Why Add Fade-In Animation to Your Website?

Integrating CSS animation should never be an afterthought. Every design choice, including animation, must contribute to the user experience (UX). Animation, due to its inherent movement, demands early consideration in the design process.

Website animation serves a purpose beyond aesthetics. It enhances the flow of your site, creating a more engaging User Interface (UI). Fade-in animation, among various animation types, offers flexibility for creating image fades, text fades, hover fades, scrolling fades, and background fades.

Now, let’s explore some practical implementations of CSS fade in transitions.

CSS Transition Opacity

The CSS opacity property determines an element’s transparency, ranging from 0 (completely transparent) to 1 (completely opaque). Combining opacity with the transition or animation property allows an element to smoothly transition from transparent to opaque, resulting in a fade-in animation.

Fade-In Image Transition Using CSS

To demonstrate opacity transitions, consider a fade-in image effect. Here’s a step-by-step guide:

1. In your HTML, create a div with the class “fade-in-image” and place your image inside it.

<div class=“fade-in-image”>

   <img src=“source”>

</div>

2. In your CSS, assign the “fadeIn” animation to the “fade-in-image” class.

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

3. Define the fadeIn keyframes, setting opacity from 0% to 100%.

@keyframes fadeIn {

   0% { opacity: 0; }

   100% { opacity: 1; }

}

4. Include vendor prefixes for cross-browser compatibility.

This CSS code can be reused with other images by applying the “fade-in-image” class within an element containing an image.

Fade-In Text Transition Using CSS

Similarly, you can apply fade-in animation to text. Follow these steps:

1. In your HTML, create a div with the class “fade-in-text” and insert your text inside it.

<div class=“fade-in-text”>

   <p>Fade-in Text</p>

</div>

2. In your CSS, assign the “fadeIn” animation to the “fade-in-text” class.

.fade-in-text {

   font-family: Arial;

   font-size: 150px;

   animation: fadeIn 5s;

}

3. In your CSS, assign the “fadeIn” animation to the “fade-in-text” class.

.fade-in-text {

   font-family: Arial;

   font-size: 150px;

   animation: fadeIn 5s;

}

4. Define the fadeIn keyframes, setting opacity from 0% to 100%.

@keyframes fadeIn {

   0% { opacity: 0; }

   100% { opacity: 1; }

}

5. Add vendor prefixes for cross-browser compatibility.

This CSS code can be applied to any text element using the “fade-in-text” class.

You may also read: How to Trademark a Brand Name in 3 Simple Steps

CSS Fade In Transition on Hover

For a more interactive experience, trigger fade-in animation on mouse hover. This can be applied to both text and images. Here’s an example for an image:

1. In your HTML, create a div with the class “fade-in-image” and place your image inside it.

<div class=“fade-in-image”>

   <img src=“source”>

</div>

2. In your CSS, set the initial opacity of the “fade-in-image” class to 50%.

.fade-in-image:hover {

   opacity: 100%;

   transition: opacity 1s;

}

This CSS code creates a fade-in effect when a user hovers over the image.

CSS Fade In Transition on Scroll

Implementing fade-in animation on scroll involves JavaScript. The code registers scroll events and adjusts CSS accordingly. Here’s a simplified example:

1. In HTML, create multiple section elements with unique classes based on color.

<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 height of each section to 100vh.

section { height: 100vh; }

3. Apply initial styles for elements with the class “tag.”

.tag {

   opacity: 0;

   transform: translate(0, 10vh);

   transition: all 1s;

}

4. Create styles for the “tag.visible” class.

.tag.visible {

   opacity: 1;

   transform: translate(0, 0);

}

5. Add background colors to section elements.

6. In JavaScript, detect scroll events and toggle the “visible” class based on element positions.

This JavaScript code uses jQuery for simplicity. It detects scroll events, checks if sections are in view, and toggles the “visible” class accordingly.

CSS Fade Background Transition

To create a fade background color transition, style the body element using the CSS animation property. Here’s an example transitioning from yellow to green over six seconds:

1. In CSS, assign initial background color, animation, and animation-fill-mode to the body.

body {

   background: #FCE97F;

   animation: fadeBackground 6s;

   animation-fill-mode: forwards;

}

2. Define the fadeBackground keyframes for initial and final background colors.

@keyframes fadeBackground {

   from { background-color: #FCE97F; }

   to { background-color: #2EB07B; }

}

This CSS code creates a gradual background color transition on the body element.

Fade-in animation, when used purposefully, enhances storytelling and engagement on your website. Avoid unnecessary animation and focus on using fade-in effects to highlight specific elements, creating smoother transitions, and improving the overall user experience.

Remember, thoughtful integration of animation contributes to a more compelling and effective website.

Keep reading: 10 Things to Know About Rocket Money