JSFiddle - React, Tailwind, and code Playground

by jonjohnjohnson

HTML

<div class="rev rev-1"></div>
<div class="rev rev-2"></div>

CSS

.rev {
  width: 10px;
  height: 10px;
  background-color: #f00;
  animation: anim 2s infinite;
  --x1: 0.8;
  --y1: 0.4;
  --x2: 0.2;
  --y2: 1.0;
  --rev: 0;
  animation-timing-function: cubic-bezier(
    calc((var(--rev) * (1 - var(--x2))) + ((1 - var(--rev)) * var(--x1))),
    calc((var(--rev) * (1 - var(--y2))) + ((1 - var(--rev)) * var(--y1))),
    calc((var(--rev) * (1 - var(--x1))) + ((1 - var(--rev)) * var(--x2))),
    calc((var(--rev) * (1 - var(--y1))) + ((1 - var(--rev)) * var(--y2)))
  );
}

.rev-2 {
  --rev: 1;
  animation-direction: reverse;
}

@keyframes anim {
  from { transform: translateX(0px) }
  to   { transform: translateX(100px) }
}