Rubber Band Text animation using HTML and CSS

Last Updated : 19 Jun, 2024

Rubber Band Text animation refers to a CSS effect where text appears to stretch and bounce back, resembling a rubber band. This playful animation adds dynamic visual interest to text, often achieved using CSS keyframes for smooth, elastic-like transitions on hover or load.

Creating Structure: In this section, we will just use the HTML to create the text string.

HTML Setup: Create a basic HTML structure with <!DOCTYPE html>, meta charset, and title for the document.
Text Container: Add a <div> with id="text" containing an <h1> heading and a <b> tag for instructions.
CSS for Animation: Define and apply CSS for styling and @keyframes animation for the rubber band effect.

Example: Here we are following the above-mentioned approach.

HTML

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

<head>
    <meta charset="utf-8" />
    <title>Rubber Band Text Animation</title>

</head>

<body>
    <div id="text">
        <h1>GeeksforGeeks</h1>
        <b>Hover over on the text</b>
    </div>
</body>

</html>

Designing Structure: In this section we will design the structure to make the created text string rubbery.

CSS Code: In this section we will create the animation effect using CSS animations, we will use the @keyframes rule to specify the animation code. We will use the transform property to produce the animation
Initial State: At 0%, the text starts at its normal size with transform: scale(1, 1).
Stretch and Squash: At 25%, the text stretches horizontally and squashes vertically with transform: scale(1.3, 0.6).
Return to Normal: At 50% and 100%, the text slightly adjusts then returns to its original size with transform: scale(1, 1).

CSS

body {
    margin: 0;
    padding: 0;
    font-family: serif;
}

#text {
    position: relative;
    margin-top: 100px;
    text-align: center;
}

h1 {
    color: green;
}

#text:hover {
    animation: effect linear 1s;
}

@keyframes effect {
    0% {
        transform: scale(1, 1);
    }

    25% {
        transform: scale(1.3, 0.6);
    }

    50% {
        transform: scale(1.1, 0.9);
    }

    100% {
        transform: scale(1, 1);
    }
}

Final Solution: It is the combination of the above two code sections.

HTML

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

<head>
    <meta charset="utf-8" />
    <title>Rubber Band Text Animation</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: serif;
        }

        #text {
            position: relative;
            margin-top: 100px;
            text-align: center;
        }

        h1 {
            color: green;
        }

        #text:hover {
            animation: effect linear 1s;
        }

        @keyframes effect {
            0% {
                transform: scale(1, 1);
            }

            25% {
                transform: scale(1.3, 0.6);
            }

            50% {
                transform: scale(1.1, 0.9);
            }

            100% {
                transform: scale(1, 1);
            }
        }
    </style>
</head>

<body>
    <div id="text">
        <h1>GeeksforGeeks</h1>
        <b>Hover over on the text</b>
    </div>
</body>

</html>

Output:

The rubber band text animation is an engaging CSS effect where text stretches and bounces back, resembling a rubber band. By combining HTML structure and CSS keyframes animation, we create a dynamic visual interest for text elements. This animation enhances user experience by adding a playful and interactive element to web design. Through the use of CSS animations and the @keyframes rule, we can easily implement this effect, making text appear elastic and responsive on hover or load. This guide demonstrates a step-by-step approach to achieving this popular effect, providing both the HTML structure and CSS design necessary for a smooth, rubbery animation.

Text Animation using HTML & CSS @keyframes Rule

lakshgoel204

Improve

Article Tags :

Rubber Band Text animation using HTML and CSS

Similar Reads

Thank You!

What kind of Experience do you want to share?