JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="box" style="--t: rotate(360deg)"></div>

<div class="box" style="--t: scale(1.5) rotate(30deg)"></div>

<div class="box" style="--t: translateX(5rem)"></div>

CSS

.box { background: #f008; width: 5rem; height: 5rem; }

@keyframes dynamic {
  0% { transform: none; }
  100% { transform: var(--t); }
}

.box:hover {
  animation: dynamic 3s linear;
}