Circle Grow Infinite

PHOTO

Tue Mar 29 2022 10:43:56 GMT+0000 (Coordinated Universal Time)

HTML
====
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="main">
      <div class="inner inne5r1 isActive"></div>
    <div class="inner inner2"></div>
  </div>
</body>
</html>
====

CSS

.main {
  width: 100vw;
  height: 500px;
  background-color: #fff;
  position: relative;
  overflow: hidden;
}
.inner1 {
  background-color: #F8F8F8;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
}
.inner2 {
  background-color: #fff;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
   z-index: 1;
}
.inner1.isActive, .inner2.isActive {
   transform: translate(-50%, -50%);
  animation: scale 10s infinite forwards;
  z-index: 999;
}
@keyframes scale {
  from {transform: scale(0);}
  to {transform: scale(80);}
}

=====

var myIndex = 0;
function scale () {
  var i;
  var inner = document.querySelectorAll('.inner');
   for (i = 0; i < inner.length; i++) {
    inner[i].classList.remove('isActive');
    }
  myIndex++;
  if (myIndex > inner.length) {
    myIndex = 1
  }
  inner[myIndex - 1].classList.add('isActive');
  setTimeout(scale, 5000);
 setTimeout(function(){
  document.querySelector('.main').style.backgroundColor = getComputedStyle(inner[myIndex - 1]).backgroundColor;
 }, 4000);
  console.log(getComputedStyle(inner[myIndex - 1]).backgroundColor);
 }
scale();

COPY