JSFiddle - React, Tailwind, and code Playground

HTML

<style>
.box {
  align-items: center;
  display: grid;
  text-align: center;
  
  position: relative;
  width: 130px;
  height: 130px;
  top: 50px;
  left: 50px;
}
</style>


<div class="box 🦜">party or die</div>

CSS

:root {
  --max-translation: 0px;  /* pixels */
  --translation-phase: -3; /* radians */
  --max-skew: 18;          /* degrees */
  --max-scale-diff: 0.15;  /* scale factor */
  --anim-freq: 2;          /* Hz */

  --anim-time: calc(1/var(--anim-freq) * 1s);
}


.🦜 {
  animation: 🎉 var(--anim-time) infinite linear, 🎨 var(--anim-time) infinite linear;
  transform-origin: bottom center;
}

@keyframes 🎨 {
  0%,
  100% { background-color: #ff8d8b; }
  11.11% { background-color: #fed689; }
  22.22% { background-color: #88ff89; }
  33.33% { background-color: #87ffff; }
  44.44% { background-color: #8bb5fe; }
  55.56% { background-color: #d78cff; }
  66.67% { background-color: #ff8cff; }
  77.78% { background-color: #ff68f7; }
  88.89% { background-color: #fe6cb7; }
}

@keyframes 🎉 {
  0.0% {
    transform:
    skewX(calc(var(--max-skew) * -1.0000deg))
    translateX(calc(var(--max-translation) * sin(0.0000 + var(--translation-phase))))
    scaleY(calc(1 + var(--max-scale-diff) * 0.0000));
  }
  5.0% {
    transform:
    skewX(calc(var(--max-skew) * -0.9511deg))
    translateX(calc(var(--max-translation) * sin(0.3142 + var(--translation-phase))))
    scaleY(calc(1 + var(--max-scale-diff) * 0.3090));
  }
  10.0% {
    transform:
    skewX(calc(var(--max-skew) * -0.8090deg))
    translateX(calc(var(--max-translation) * sin(0.6283 + var(--translation-phase))))
    scaleY(calc(1 + var(--max-scale-diff) * 0.5878));
  }
  15.0% {
    transform:
    skewX(calc(var(--max-skew) * -0.5878deg))
    translateX(calc(var(--max-translation) * sin(0.9425 + var(--translation-phase))))
    scaleY(calc(1 + var(--max-scale-diff) * 0.8090));
  }
  20.0% {
    transform:
    skewX(calc(var(--max-skew) * -0.3090deg))
    translateX(calc(var(--max-translation) * sin(1.2566 + var(--translation-phase))))
    scaleY(calc(1 + var(--max-scale-diff) * 0.9511));
  }
  25.0% {
    transform:
    skewX(calc(var(--max-skew) * -0.0000deg))
    translateX(calc(var(--max-translation) * sin(1.5708 +...