JSFiddle - React, Tailwind, and code Playground

by Roman Fedytskyi

HTML

<div id="container"></div>

CSS

#container {
  width: 500px;
  height: 500px;
  background-color: #23a2ec;
  position: relative;
  overflow: hidden;
}

.bubble {
  background-color: white;
  position: absolute;
  border-radius: 50%;
  -webkit-animation: moving 1s ease-in-out 0.9s infinite alternate;
}

@keyframes moving {
   from {
     transform: scale(1);
   }
   to {
     transform: scale(1.4)
   }

    0%   {background-color:red;}
    5% . {background-color:white;}
    10% . {background-color:ivory;}
    15% . {background-color:grey;}
    25%  {background-color:yellow;}
    50%  {background-color:blue;}
    75%  {background-color:green;}
    100% {background-color:red;}
}

JavaScript

const container = document.getElementById('container');
const count = Math.floor(Math.random() * 500);

for (let i = 0; i < count; i++) {
  let bubble = document.createElement("div");
  bubble.classList.add('bubble');
  
  let top = Math.floor(Math.random() * 500);
  let left = Math.floor(Math.random() * 500);
  let d = Math.floor(Math.random() * 15);
  let time = Math.floor(Math.random() * 50);

  bubble.style.top = top + 'px';
  bubble.style.left = left + 'px';
  bubble.style.width = d + 'px';
  bubble.style.height = d + 'px';

  setTimeout(() => {
    container.append(bubble);
  }, time * 100);
}