How to create a bouncing bubble effect using CSS ?

Last Updated : 30 Jun, 2020

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.

Create a few containers using span element as follow:
<div class="dot">

    <span></span>

    <span></span>

    <span></span>

    <span></span>

</div>
To make the containers look spherical, the border radius must be changed as: border-radius :50%;
To give the spheres a bubble like effect the opacity and background color can be changed as: background-color :#DF0101; opacity :0.8;
The position must be set to absolute and the bubbles can be set to any position accordingly.
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).
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.

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