Skip to content
Related Articles

Related Articles

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 <lspan> 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:




    <div class="dot">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
  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.




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

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :