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();