JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box"></div>

CSS

html {
  background: #f2f2f2;
}

.box {
  animation-name: movingBox;
  animation-duration: 1300ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;

  width: 100px;
  height: 100px;
  background: #fff;
  box-shadow: 0 10xp 20px rgba(0,0,0,0.5);
}

@keyframes movingBox {
  0% {
    transform: translate(0, 0);
    opacity: 0.3;
  }

  25% {
    opacity: 0.9;
  }

  50% {
    transform: translate(100px, 100px);
    opacity: 0.2;
  }

  100% {
    transform: translate(30px, 30px);
    opacity: 0.8;
  }
}