JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>
<div></div>
<div></div>

CSS

body { background: rgb(227,227,227) }
div {
  height:80px; width:80px;
  border-radius:15px;
  position:absolute;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
div:nth-of-type(1) {
  -webkit-animation: change 4.5s infinite;
  animation: change 4.5s infinite;
}
div:nth-of-type(2) {
  -webkit-animation: change 4.5s -1.5s infinite;
  animation: change 4.5s -1.5s infinite;
}
div:nth-of-type(3) {
  -webkit-animation: change 4.5s -3s infinite;
  animation: change 4.5s -3s infinite;
}
@-webkit-keyframes change {
  0%  {
    top:calc(25% - 40px);
    left:calc(50% - 40px);
    background: #2F2631;
    -webkit-transform: scale(.7) rotateZ(-20deg) skewX(60deg) scaleX(1.8) skewY(10deg);
  }
  33% {
    background: #D2B0AE;
    top:calc(75% - 40px);
    left:calc(25% - 40px);
    -webkit-transform: scale(1.7) rotateY(100deg) rotateZ(50deg);
  }
  66% {
    background: #EBEFD1;
    top:calc(75% - 40px);
    left:calc(75% - 40px);
    -webkit-transform: scale(2.2) scaleX(.7) rotateY(-60deg) rotateX(-40deg) rotateZ(50deg);
  }
  100% {
    background: black; 
    top:calc(25% - 40px);
    left:calc(50% - 40px);    
    -webkit-transform: scale(.7) rotateZ(-20deg) skewX(60deg) scaleX(1.8) skewY(10deg);
  }
}
/*
@keyframes change {
  0%  {
    top:calc(25% - 40px);
    left:calc(50% - 40px);
    background: #2F2631;
    transform: scale(.7) rotateZ(-20deg) skewX(60deg) scaleX(1.8) skewY(10deg);
  }
  33% {
    background: #D2B0AE;
    top:calc(75% - 40px);
    left:calc(25% - 40px);
    transform: scale(1.7) rotateY(100deg) rotateZ(50deg);
  }
  66% {
    background: #EBEFD1;
    top:calc(75% - 40px);
    left:calc(75% - 40px);
    transform: scale(2.2) scaleX(.7) rotateY(-60deg) rotateX(-40deg) rotateZ(50deg);
  }
  100% {
    background: black; 
    top:calc(25% - 40px);
    left:calc(50% - 40px);    
    transform: scale(.7) rotateZ(-20deg) skewX(60deg) scaleX(1.8) skewY(10deg);
  }
}
*/