JSFiddle - React, Tailwind, and code Playground

by Danny Michaelis

HTML

<div class="stylie stylie2"></div>
<div class="stylie stylie1"></div>

CSS

.stylie {
     display: inline-block;
  background-color: red;
  width: 10px;
  height: 10px;
}    
.stylie2{
      background-color: blue;
}
.stylie1 {
  -webkit-animation-name: stylie-transform-keyframes;
  -webkit-animation-duration: 6000ms;
  -webkit-animation-delay: 0ms;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -webkit-transform-origin: 0 0;
  animation-name: stylie-transform-keyframes;
  animation-duration: 6000ms;
  animation-delay: 0ms;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  transform-origin: 0 0;
}
@-webkit-keyframes stylie-transform-keyframes {
  0% {-webkit-transform:translate(0px, 0px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
  0.78% {-webkit-transform:translate(51.8959px, 0px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
  1.55% {-webkit-transform:translate(100.4979px, 0px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
  2.33% {-webkit-transform:translate(145.906px, 0px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
  3.1% {-webkit-transform:translate(188.2199px, 0px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
  3.88% {-webkit-transform:translate(227.5397px, 0px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
  4.65% {-webkit-transform:translate(263.9652px, 0px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
  5.43% {-webkit-transform:translate(297.5963px, 0px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
  6.2% {-webkit-transform:translate(328.5329px, 0px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
  6.98% {-webkit-transform:translate(356.875px, 0px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%,...