How to Create Wave Text Animation with HTML and CSS

Introduction

A wave text animation in CSS creates the effect of text "waving" in a smooth and engaging motion. This can be achieved using @keyframes to define the wave motion and applying the transform property to move individual letters in a wave pattern. Each letter in the text moves up and down at different times, simulating the wave effect.

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

Problem Statement

Create a CSS code that:

Animates each letter of the text to move up and down in a wave pattern using @keyframes and transform.
Demonstrates how to control the wave's speed and repetition.

Example:

Input: A heading element with the text "Wave Text Animation".
Output: The text animates in a wave-like motion, with each letter moving up and down.

Solution Steps

Wrap Each Letter in a span: Wrap each letter of the text in a separate span element to apply individual animations.
Use @keyframes for Wave Animation: Define keyframes to move the letters up and down.
Apply animation-delay for Staggered Animation: Use the animation-delay property to stagger the animation, making the letters move in sequence.

HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wave Text Animation</title>
    <style>
        /* Step 1: Define basic text style */
        .wave-text {
            display: inline-block;
            font-size: 2rem;
            font-family: Arial, sans-serif;
            white-space: nowrap; /* Prevent text from wrapping to the next line */
        }

        /* Step 2: Apply animation to each letter */
        .wave-text span {
            display: inline-block;
            animation: wave 1.5s ease-in-out infinite; /* 1.5s wave animation */
        }

        /* Step 3: Define wave keyframes */
        @keyframes wave {
            0%, 100% {
                transform: translateY(0); /* Starting position */
            }
            50% {
                transform: translateY(-10px); /* Move letter up */
            }
        }

        /* Step 4: Add delay to each letter for staggered animation */
        .wave-text span:nth-child(1) { animation-delay: 0s; }
        .wave-text span:nth-child(2) { animation-delay: 0.1s; }
        .wave-text span:nth-child(3) { animation-delay: 0.2s; }
        .wave-text span:nth-child(4) { animation-delay: 0.3s; }
        .wave-text span:nth-child(5) { animation-delay: 0.4s; }
        .wave-text span:nth-child(6) { animation-delay: 0.5s; }
        .wave-text span:nth-child(7) { animation-delay: 0.6s; }
        .wave-text span:nth-child(8) { animation-delay: 0.7s; }
        .wave-text span:nth-child(9) { animation-delay: 0.8s; }
        .wave-text span:nth-child(10) { animation-delay: 0.9s; }

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

    <div class="container">
        <h1 class="wave-text">
            <!-- Step 1: Wrap each letter in a span -->
            <span>W</span><span>a</span><span>v</span><span>e</span>
            <span> </span>
            <span>T</span><span>e</span><span>x</span><span>t</span>
        </h1>
    </div>

</body>
</html>

Output

Explanation

Step 1: Wrap Each Letter in a `span`

Each letter is wrapped in a span element so that the animation can be applied individually to each letter:
```
Wave
```

Step 2: Define the Wave Animation with `@keyframes`

The wave animation moves each letter up and down. This is defined using @keyframes with transform: translateY():
```
@keyframes wave {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}
```
- At 0% and 100%, the letter is in its original position.
- At 50%, the letter moves up by -10px, simulating the peak of the wave.

Step 3: Stagger the Animation with `animation-delay`

The animation-delay property is used to delay the animation for each letter, creating the wave effect:
```
.wave-text span:nth-child(1) { animation-delay: 0s; }
.wave-text span:nth-child(2) { animation-delay: 0.1s; }
```
- This creates a sequence where each letter starts the animation slightly later than the previous one.

Step 4: Center the Text

Use text-align: center to center the text within the page:

.container {
    text-align: center;
    margin-top: 100px;
}

Conclusion

Creating a wave text animation in CSS is easy using @keyframes for movement and animation-delay to stagger the animation of each letter. This technique adds a fun and dynamic effect to your text, making it visually engaging for users on your web page.

Java Guides

Search This Blog