How to Create a Bouncing Text Animation with HTML and CSS

Introduction

Creating a bouncing text animation in CSS adds dynamic movement to your web page, drawing attention to important content. This effect can be achieved using @keyframes to define the animation and the transform property to simulate the bounce.

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

Problem Statement

Create a CSS code that:

Animates text to bounce up and down using the @keyframes and transform properties.
Demonstrates how to control the bounce speed and height.

Example:

Input: A paragraph element with the text "Bouncing Text Animation".
Output: The text bounces up and down continuously.

Solution Steps

Use @keyframes for Bounce Animation: Create keyframes to define the bounce motion.
Apply the Bounce Effect to Text: Use the animation property to control the bouncing speed and repetition.

HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bouncing Text Animation</title>
    <style>
        /* Step 1: Define keyframes for the bounce animation */
        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {
                transform: translateY(0); /* Start and end at the original position */
            }
            40% {
                transform: translateY(-30px); /* Move up */
            }
            60% {
                transform: translateY(-15px); /* Move up slightly */
            }
        }

        /* Step 2: Apply bounce effect to text */
        .bouncing-text {
            font-size: 3rem;
            color: #3498db;
            animation: bounce 2s infinite; /* 2-second bounce 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">
        <p class="bouncing-text">Bouncing Text Animation</p>
    </div>

</body>
</html>

Output

You can play with the above HTML in Online HTML Editor and Compiler. Here is the output of the above HTML page.:

Explanation

Step 1: Define `@keyframes` for Bounce Animation

The @keyframes rule defines the bounce movement. The text moves up and down in a bouncing motion using the transform: translateY() property:

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0); /* Start and end at the original position */
    }
    40% {
        transform: translateY(-30px); /* Move up */
    }
    60% {
        transform: translateY(-15px); /* Move up slightly */
    }
}

At 40% in the animation timeline, the text moves up by -30px, creating the upward bounce. At 60%, it moves up slightly by -15px, simulating the natural bounce back.

Step 2: Apply the Bounce Effect to Text

To apply the bounce animation to the text, use the animation property:
```
.bouncing-text {
    animation: bounce 2s infinite;
}
```
The 2s duration defines the length of the bounce cycle, and infinite ensures that the animation loops continuously.

Conclusion

Creating a bouncing text animation in CSS is simple using @keyframes and the transform property. This effect adds fun, dynamic motion to your text, making it visually engaging and helping important messages stand out on your web page.

Java Guides

Search This Blog