JSFiddle - React, Tailwind, and code Playground

by Jesse M

HTML

<div><div class="client-box" style="background:#f00;"></div></div>
<div><div class="client-box" style="background:#000;"></div></div>
<div><div class="client-box" style="background:#ccc;"></div></div>
<div><div class="client-box" style="background:#d3d;"></div></div>
<div><div class="client-box" style="background:#555;"></div></div>
<div><div class="client-box" style="background:#f00;"></div></div>
<div><div class="client-box" style="background:#000;"></div></div>
<div><div class="client-box" style="background:#ccc;"></div></div>

CSS

div:not(.client-box) {
  width:200px;
  height:200px;
  display:inline-block;
  position:relative;
}
.client-box {
  position:absolute;
  top:50%;
  left:50%;
  width:0;
  height:0;
  opacity:0;
  -webkit-animation:spin 1s linear infinite;
  animation:spin 1s linear infinite;
}
@-webkit-keyframes spin {
  0% {
    -ms-transform:rotate(0deg);
    -webkit-transform:rotate(0deg);
    transform:rotate(0deg);
    }
  100% {
    -ms-transform:rotate(360deg);
    -webkit-transform:rotate(360deg);
    transform:rotate(360deg);
  }
}
@keyframes spin {
  0% {
    -ms-transform:rotate(0deg);
    -webkit-transform:rotate(0deg);
    transform:rotate(0deg);
    }
  100% {
    -ms-transform:rotate(360deg);
    -webkit-transform:rotate(360deg);
    transform:rotate(360deg);
  }
}

JavaScript

$('.client-box').each(function(i, elem){
    setTimeout(function(){
        $(elem).animate({
                width:'100%',
                height:'100%',
                top:0,
                left:0,
                opacity:1
        }, 700);
    }, 100 * i);
});