How to create a bouncing bubble effect using CSS ?

One simple way of making a website more dynamic and attractive is to add some animations to it. One such animation is the bouncing bubble effect.

Approach: The basic idea is to create a section using &ltlspan> element, give it a round shape then by using the CSS animation property translateY the bubble can be moved up and down along the Y-axis. The following steps can be followed to obtain the desired result.

  1. Create a few containers using span element as follow:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  2. To make the containers look spherical, the border radius must be changed as: border-radius :50%;
  3. To give the spheres a bubble like effect the opacity and background color can be changed as: background-color :#DF0101; opacity :0.8;
  4. The position must be set to absolute and the bubbles can be set to any position accordingly.
  5. To make the effect more realistic the dimension can be changed as the bubble reaches the surface (i.e. increase the width and decrease the height).
  6. To make the bubbles move in an unordered form the animation-delay can be varied for different bubbles and the size can also be varied.

Example: This example implements the above approach.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

This is just a simple animation, the more attractive things can be created by modifying or adding more animation effects to it.

full-stack-img




My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



Improved By : nidhi_biet