How to animate text fade in on web with CSS

Raif ShareefRaif Shareef
6 min read

Table of contents

Outline

What had started off as a curious detour into web animations, has led me to create this blog to document my learnings and experiments.

In this post, we’ll look at basics of animation and do a simple text fade in with css covering the following topics:

  1. Usability and UX objectives for web animations.

  2. Define what text animation is and why you should consider motion.

  3. Explanation of text animation and its importance.

  4. Brief overview of CSS for animations.

  5. Basic configuration for CSS.

  6. Getting Started with animation.

  7. Files setup for HTML and CSS.

  8. Using animation and @keyframes.

  9. Using animation Property to Control the Timing and Duration.

  10. Implementing @keyframes for the fade-in animation.

  11. Setting up the CSS class for fade-in effect.

  12. Applying the CSS class fade-in-text Animation to HTML elements.

  13. References.

Introduction

Defining text animation and its importance

Animated elements drives attention and helps tell stories with motion. Aurora Harley shared about the usability of animations and discussed the types of motion best suited for different design goals in the article Animation for Attention and Comprehension.

It is important to figure out where animations can serve its purpose best. To summarise the article states three user experience objectives for animation and interaction:

  1. Draw attention to and explain changes on the page

  2. Add fun and whimsy

  3. Appear modern and up to date with new design trends

Text animation, or kinetic typography is a technique that uses movement and visual effects to make words and phrases come alive. It boosts engagement, highlights important information, and makes transitions smoother in videos, logos, websites, and social media.

Brief overview of CSS for animations

CSS animations changes an element from one CSS style to another based on your animation settings.

There are two key parts to using CSS animations (MDN):

  1. a style which describes the animation.

  2. a set of keyframes that show the state at the start, end and any middle points of the animation’s style.

According to this MDN page, there are three main benefits of using CSS animations instead of traditional script-driven (JavaScript) animation methods:

  1. Simple to use for basic animations; you don't need to know JavaScript to create them.

  2. The animations perform well, even when the system is busy.

    • Simple animations can sometimes run poorly in JavaScript, but the rendering engine can use tricks like frame-skipping to keep them smooth.

  3. When the browser controls the animation sequence, it can optimise performance and efficiency.

    • like lowering the update frequency for animations in tabs that aren't visible.

Basic configuration for CSS

To make a CSS animation sequence, you need two things in your CSS file to get started.

  1. You use the animation property or its sub-properties to style the element you want to animate.

    • This allows you to set the timing, duration, and other details of the animation.

  2. The actual look of the animation is set using the @keyframes at-rule.

Getting Started

We’ll be doing a hello world with animation, to apply the animation concepts we have covered above.

Files setup

Let’s set up our element in HTML file.

→ Start by creating an index.html file.

I’m gonna ignore the standard HTML code. But you can type html:5 and press tab/enter in an HTML file in VS Code to create a basic HTML5 structure.

<h1>
Hello World
</h1>

Now that our HTML is done, let’s setup our CSS file.

→ Create style.css file

Next, let’s set up a basic, centered layout for the webpage while also controlling how the page's elements are sized and displayed.

* {
  box-sizing: border-box;
}

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  overflow: hidden;
}

To connect an external CSS file to your HTML document, use the <link> element inside the <head> section of the HTML file.

<link rel="stylesheet" href="styles.css">

Using animation and @keyframes

Using CSS selector, we are going to select the element we want to animate. In this case, it’s the <h1> heading.

h1 {
  opacity: 0;
  animation: fade-in 4s forwards;
}

@keyframes fade-in {
  to {opacity: 1; }
}

The code above animates an <h1> element so that it fades in from being completely transparent to fully visible.

gif of hello world fade in animation

Using animation Property to Control the Timing and Duration

The animation property is a shorthand that allows you to set multiple animation-related properties at once.

h1 { ... }: This is a CSS rule that targets all <h1> elements on the page.

  • opacity: 0;: This line sets the initial state of the <h1> element to be completely transparent. An opacity of 0 means it is invisible.

  • animation: fade-in 4s forwards;: This applies a CSS animation named fade-in to the <h1> element.

    • fade-in: This is the name of the animation that is defined later in keyframes.

    • 4s: This is the duration of the animation, meaning it will take 4 seconds to complete.

    • forwards: This is the animation-fill-mode property.

      • It's crucial because it tells the browser to keep the final state of the animation (the to keyframe) after the animation has finished.

      • Without forwards, the <h1> would fade in and then immediately jump back to its initial state of opacity: 0.

Implementing @keyframes for the fade-in animation

In @keyframes block we are defining an animation called fade-in (it can be any name you want)

@keyframes fade-in { ... }: This is an at-rule that defines the keyframes for the fade-in animation.

  • to { opacity: 1; }: This is the single keyframe that defines the animation's end state.

  • It instructs the browser to animate the opacity property to a value of 1 (which is fully opaque) by the end of the animation duration.

  • The animation automatically interpolates (or animates) from the initial opacity: 0 to the final opacity: 1 over the specified 4 seconds.

Now that basics are covered. How can we improve the design of this implementation? We can use CSS class to make this more scalable and practical.

Setting up the CSS class for fade-in effect

While we can directly apply animation to an element selector like h1, using a dedicated CSS class offers more flexibility and reusability.

Imagine you want to apply this fade-in to other elements later. Creating a .fade-in-text class makes this straightforward.

.fade-in-text {
  opacity: 0;
  animation: fade-in 4s forwards;
}

Applying the CSS class fade-in-text Animation to HTML elements

To apply this animation to our text, we need to target the specific HTML element. In our initial example, it was the <h1>element.

If we opted for the .fade-in-text class approach, we would apply it to the desired HTML elements like this:

<p>
   I now understand the basics of
  <span class='fade-in-text'>
    web animation with CSS
  </span>
  by following this tutorial
</p>

With this approach you can apply this style to multiple elements in your HTML instead of all <h1> elements which might not be ideal in practice.

Now to put this all together, here is everything put together for you to experiment and play around with.

https://codepen.io/raif-sh/pen/jEbZvZZ

References

0
Subscribe to my newsletter

Read articles from Raif Shareef directly inside your inbox. Subscribe to the newsletter, and don't miss out.

CSS Animation

Written by

Raif Shareef
Raif Shareef

I am a self-taught developer and product manager based in Malaysia. Currently learning and documenting the journey.