How to create a bouncing bubble effect using CSS ? - GeeksforGeeks

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.
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.
Create a few containers using span element as follow:<div class="dot">    <span></span>    <span></span>    <span></span>    <span></span></div>
<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>
Output:
This is just a simple animation, the more attractive things can be created by modifying or adding more animation effects to it.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
nidhi_biet
CSS-Misc
HTML-Misc
CSS
HTML
Web Technologies
Web technologies Questions
Write From Home
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to set space between the flexbox ?
Design a web page using HTML and CSS
Create a Responsive Navbar using ReactJS
How to Upload Image into Database and Display it using PHP ?
Form validation using jQuery
How to set the default value for an HTML <select> element ?
HTML Cheat Sheet - A Basic Guide to HTML
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)