Text Animation with changing the color of the text using HTML and CSS

Last Updated : 16 Jan, 2024

Text animation is the creation of beautiful and colorful letters, words, and paragraphs with a decorative movable effect. The movement can be seen in some fashion within the area or across the screen following some regular pattern.

The @keyframes in CSS allows defining a series of animations at specific points during an animation sequence. In this styles are declared for different stages of the animation, enabling dynamic transitions and effects.

Syntax for @keyframes:

@keyframes animationname {keyframes-selector {css-styles;}}

Approach:

First, create an HTML file with a container div and two span elements for the text.
Apply styles for the container, text1, and text2, setting initial appearances.
Define font size, color, spacing, and positioning for text1 and text2.
Use @keyframes to specify color and letter-spacing changes at different animation stages.
Apply the animation to text1 within the container, creating a 3-second effect with color and letter-spacing variations.

Example:

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Text Animation</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            font-family: sans-serif;
        }

        body {
            background: yellowgreen;
        }

        .container {
            text-align: center;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
        }

        .container span {
            display: block;
        }

        .text1 {
            color: white;
            font-size: 70px;
            font-weight: 700;
            letter-spacing: 8px;
            margin-bottom: 20px;
            background: yellowgreen;
            position: relative;
            animation: text 3s 1;
        }

        .text2 {
            font-size: 30px;
            color: darkgreen;
            font-family: Georgia, serif;
        }

        @keyframes text {
            0% {
                color: black;
                margin-bottom: -40px;
            }

            30% {
                letter-spacing: 25px;
                margin-bottom: -40px;
            }

            85% {
                letter-spacing: 8px;
                margin-bottom: -40px;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <span class="text1">Hello!</span>
            <span class="text2">GeeksforGeeks</span>
        </div>
    </div>
</body>

</html>