JSFiddle - React, Tailwind, and code Playground

HTML

<div class="first-row-container">
    <div id="two-box" class="first-row-styles animation-target"></div>  </div>

CSS

#two-box {
  background-image: url("http://i.imgur.com/q3BPTWO.jpg");
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  background-size: 100% 100%;
  image-rendering: -webkit-optimize-contrast;
  border-style: solid;
  border-width: 2px;
  border-color: #7f8c8d;
}

.first-row-styles {
  width: 75px;
  height: 75px;
  display:inline-block;
  margin-top: 5%;
  background-color: #7f8c8d;
}

@keyframes animation {
  0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  4.2% { transform: matrix3d(2.099, 0, 0, 0, 0, 1.549, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  8.31% { transform: matrix3d(2.768, 0, 0, 0, 0, 1.884, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  12.51% { transform: matrix3d(3.064, 0, 0, 0, 0, 2.032, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  16.62% { transform: matrix3d(3.127, 0, 0, 0, 0, 2.063, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  27.73% { transform: matrix3d(3.026, 0, 0, 0, 0, 2.013, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  38.84% { transform: matrix3d(2.995, 0, 0, 0, 0, 1.997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  61.06% { transform: matrix3d(3, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  83.28% { transform: matrix3d(3, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  100% { transform: matrix3d(3, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}

.animation-target {
  animation: animation 5000ms linear both;
}