How to create a bouncing bubble effect using CSS ?

Last Updated : 12 Jul, 2025

The bouncing bubble effect in CSS creates an animation where elements, typically circles or bubbles, move up and down, simulating a bouncing motion. Using properties like @keyframes, transform, and animation, this effect adds a playful, dynamic visual appeal to the webpage.

Approach

Container Setup: The .dot container holds the bouncing bubbles, with each span inside styled to represent individual circular bubbles.
Spherical Shape: The border-radius: 50% on .dot and span elements creates a circular shape for the bubbles.
Animation Definition: The @keyframes animation animates the bubbles' vertical movement (translateY), creating a bouncing effect from top to bottom.
Bubble Styling: Each bubble (span) is uniquely styled with different sizes, colors, opacity, and positions to add variety and visual appeal.
Custom Animation Timing: Varying animation-delay and animation-duration for each bubble ensures staggered, dynamic bouncing motions at different speeds and intervals.

Example: In this example we are following above-explained approach.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        How to create a bouncing 
        bubble effect using CSS?
    </title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /* To give the containers
           in spherical shape */
        .dot {
            border-radius: 50%;
        }

        .dot span {

            position: absolute;
            display: block;
            border: 5px;
            border-radius: 50%;
            animation: animate 3s ease-in-out infinite;

        }

        /*the animation*/
        @keyframes animate {
            0% {
                transform: translateY(-300px);
            }

            50% {
                transform: translateY(190px);
                width: -100px;
                height: +100px;

            }

            100% {
                transform: translateY(-300px);
            }
        }

        /* Each bubble is defined in a
           separate section */
        /* Set the color, opacity, delay and
           duration(i.e different speed) */
        .dot span:nth-child(1) {
            top: 300px;
            left: 250px;
            height: 160px;
            width: 160px;
            background-color: yellow;
            opacity: 0.7;
            animation-delay: 0.3s;
            animation-direction: reverse;
        }

        .dot span:nth-child(2) {
            top: 310px;
            left: 400px;
            height: 190px;
            width: 190px;
            background-color: green;
            opacity: 0.9;
            animation-delay: 0.3s;
            animation-direction: reverse;
            animation-duration: 2.3s;
        }

        .dot span:nth-child(3) {
            top: 300px;
            left: 700px;
            height: 140px;
            width: 140px;
            background-color: #a97f58;
            opacity: 0.9;
            animation-delay: 0.5s;
            animation-direction: reverse;
            animation-duration: 2.6s;
        }

        .dot span:nth-child(4) {
            top: 300px;
            left: 1080px;
            height: 200px;
            width: 200px;
            background-color: #FA58AC;
            opacity: 0.9;
            animation-delay: 0.7s;
            animation-direction: reverse;
            animation-duration: 2.3s;
        }
    </style>
</head>

<body>
    <div class="dot">
        <span></span>
        <span></span>
        <span></span>
        <span></span>

    </div>
</body>

</html>

Output:

How to create a bounce in and out on scroll effect using CSS ?

srutichatterjee2024

Improve

Article Tags :

How to create a bouncing bubble effect using CSS ?

Approach

Similar Reads

Thank You!

What kind of Experience do you want to share?