animate and zoom six elements on a timer [addClass, removeClass, setTimeout]

animate and zoom six elements on a timer [addClass, removeClass, setTimeout] Demo

View Demo Full Screen View Demo New Tab

animate and zoom six elements on a timer [addClass, removeClass, setTimeout] Code

HTML

<div class='demo-boxes'>
  <div class='demo-box' id='db1'></div>
  <div class='demo-box' id='db2'></div>
  <div class='demo-box' id='db3'></div>
  <div class='demo-box' id='db4'></div>
  <div class='demo-box' id='db5'></div>
  <div class='demo-box' id='db6'></div>
</div>

CSS

.demo-box {
  border-radius:3px;
  margin:10px;
  padding:10px;
  min-height:200px;
  min-width:200px;
  background:#2e3c50;
  border:3px solid rgb(17 24 39);
  display:inline-block;
  transition: all 0.3s;
}
.demo-box-active {
  transition: all 0.1s;
  transform: scale(1.2);
  box-shadow:0px 2px 20px rgba(0,0,0,0.5);
}

Javascript

$(document).ready(function(){
      setTimeout(function() { $('#db1').addClass('demo-box-active'); }, 1000);
      setTimeout(function() { $('#db1').removeClass('demo-box-active'); }, 3000);
      setTimeout(function() { $('#db2').addClass('demo-box-active'); }, 3000);
      setTimeout(function() { $('#db2').removeClass('demo-box-active'); }, 5000);
      setTimeout(function() { $('#db3').addClass('demo-box-active'); }, 5000);
      setTimeout(function() { $('#db3').removeClass('demo-box-active'); }, 7000);
      setTimeout(function() { $('#db4').addClass('demo-box-active'); }, 7000);
      setTimeout(function() { $('#db4').removeClass('demo-box-active'); }, 9000);
      setTimeout(function() { $('#db5').addClass('demo-box-active'); }, 9000);
      setTimeout(function() { $('#db5').removeClass('demo-box-active'); }, 11000);
      setTimeout(function() { $('#db6').addClass('demo-box-active'); }, 11000);
      setTimeout(function() { $('#db6').removeClass('demo-box-active'); }, 13000);
    });