JSFiddle - React, Tailwind, and code Playground

by kthornbloom

HTML

<div class="animated"></div>

CSS

/* Define the custom property for speed */
@keyframes swoosh {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.animated {
  width: 100px;
  height: 100px;
  background: linear-gradient(to right, red, yellow);
  border-radius: 50%;
  animation: swoosh var(--speed) linear infinite;
  --speed: 5s; /* Default speed */
  transition: --speed .5s; /* Smooth transition between speeds */
}

.animated:hover {
  --speed: 2s; /* Slow speed on hover */
}