JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="square"></div>
<div class="square huh"></div>

CSS

@keyframes slide {
  0% { margin-left: 0; }
  100% { margin-left: 50vw; }
}

.square {
  --b1: 0;
  --b2: 0;
  --b3: 1;
  --b4: 1;
  width: 5em;
  height: 5em;
  background-color: dodgerblue;
  border-radius: 1em;
  animation: 3s slide cubic-bezier(var(--b1), var(--b2), var(--b3), var(--b4)) infinite;
}

.huh {
  ---b2: 1;
}