JSFiddle - React, Tailwind, and code Playground

by Antocha Parabellum

HTML

<div class="container">
    <div class="row">
      <div class="cell">
        <div class="div1"></div>
      </div>
      <div class="cell">
        <div class="div2"></div>
      </div>
    </div>
    <div class="row">
      <div class="cell">
        <div class="div3"></div>
      </div>
      <div class="cell">
        <div class="div4"></div>
      </div>
    </div>
  </div>

CSS

.x {
  position : absolute;
  
  width  : 280px;
  height : 150px;
}

.container {
  width      : 300px;
  /*margin     : 325px auto 0 auto;*/
  overflow   : hidden;
  background : #2d2d2d;
  transform  : rotate(0deg);
}

.row:first-child {
  width      : 100%;
  overflow   : hidden;
  background : #e74c3c;
}

.row:last-child {
  width    : 100%;
  overflow : hidden;
}

.row .cell:first-child { float : left;  }
.row .cell:last-child  { float : right; }

.cell {
  width    : 150px;
  height   : 75px;
  display  : inline-block;
  overflow : hidden;
  
  perspective : 150px;
}

.div1 {
  width       : 150px;
  height      : 150px;
  margin-left : 1px;

  background-color:  #2d2d2d;

  border-top-right-radius : 120%;
   border-top-left-radius : 50%;
   
  animation-name : div1;
       transform : rotateX(104deg); /* 104 */
}

.div2 {
  width       : 170px;
  height      : 150px;
  margin-left : -8px;

  background-color: #2d2d2d;

  border-top-right-radius : 50%;
   border-top-left-radius : 120%;

  animation-name : div2;
       transform : rotateX(90deg); /* from 80 to 104 */
}

.div3 {
  width       : 150px;
  height      : 150px;
  margin-top  : -75px;
  margin-left : 1px;

  background-color : #e74c3c;

  border-bottom-right-radius : 120%;
   border-bottom-left-radius : 50%;

  animation-name : div3;
       transform : rotateX(-90deg); /* from -80 to -104 */
}

.div4 {
  width       : 170px;
  height      : 150px;
  margin-top  : -75px;
  margin-left : -8px;

  background-color : #e74c3c;

  border-bottom-right-radius : 50%;
   border-bottom-left-radius : 120%;

  animation-name : div4;
       transform : rotateX(-104deg); /* -104 */
}


.div1,
.div2,
.div3,
.div4 {
  animation-iteration-count : infinite;
  animation-direction : normal;
  animation-timing-function: linear;
  animation-duration : 2s;
}

@keyframes div1 {
  0%   { transform: rotateX(104deg); }
  25%  { transform: rotateX(90deg);  }
  50%  { transform: rotateX(104deg); }
  75%  { transform:...