How to Create Fading Text Animation with HTML and CSS

Introduction

A fading text animation creates a smooth transition where the text gradually appears or disappears. This effect can be achieved using CSS @keyframes with the opacity property to control the visibility of the text over time.

In this tutorial, you'll learn how to create a fading text animation using HTML and CSS.

Problem Statement

Create a CSS code that:

Animates text to fade in and out using the @keyframes and opacity properties.
Demonstrates how to control the speed of the fade animation.

Example:

Input: A heading element with the text "Fading Text Animation".
Output: The text smoothly fades in and out continuously.

Solution Steps

Use @keyframes for Fade Animation: Define keyframes to change the text's opacity from 0 (invisible) to 1 (fully visible).
Apply the Fade Effect to Text: Use the animation property to control the duration and repetition of the fade animation.

HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fading Text Animation</title>
    <style>
        /* Step 1: Define keyframes for the fading animation */
        @keyframes fadeInOut {
            0%, 100% {
                opacity: 0; /* Fully invisible */
            }
            50% {
                opacity: 1; /* Fully visible */
            }
        }

        /* Step 2: Apply fade animation to text */
        .fading-text {
            font-size: 3rem;
            color: #3498db;
            animation: fadeInOut 4s infinite; /* 4-second animation, infinite loop */
            font-family: Arial, sans-serif;
            text-align: center;
            margin-top: 100px;
        }

        /* Center the container */
        .container {
            text-align: center;
            margin-top: 100px;
        }
    </style>
</head>
<body>

    <div class="container">
        <h1 class="fading-text">Fading Text Animation</h1>
    </div>

</body>
</html>

Output

Explanation

Step 1: Define `@keyframes` for Fading Animation

The @keyframes rule defines the fade in and fade out effect by animating the opacity property:

@keyframes fadeInOut {
    0%, 100% {
        opacity: 0; /* Invisible at start and end */
    }
    50% {
        opacity: 1; /* Fully visible at the midpoint */
    }
}

At 0% and 100% of the animation timeline, the text is fully transparent (opacity: 0), while at 50%, it becomes fully visible (opacity: 1).

Step 2: Apply the Fade Effect to Text

To apply the fading animation, use the animation property:

.fading-text {
    animation: fadeInOut 4s infinite;
}

The 4s duration defines the length of the fade cycle, and infinite ensures the animation loops continuously.

Step 3: Center the Text for Better Presentation

Center the text using text-align: center and add some margin for better layout:
```
.container {
    text-align: center;
    margin-top: 100px;
}
```

Conclusion

Creating a fading text animation with CSS is simple using @keyframes and the opacity property. This effect adds smooth transitions to your text, making it a great option for intros, messages, or any element that needs gradual visibility changes.

Java Guides

Search This Blog