JSFiddle - React, Tailwind, and code Playground

by Michaël van de Weerd

HTML

<div id="red"></div>

CSS

#red {
  width: 16px;
  height: 16px;
  background-color: red;
  transition: transform 250ms 250ms;
  animation: 600ms 500ms wiggle;
}

html:hover #red {
  transform: rotate(360deg);
  transition: transform 250ms 250ms;
}

@keyframes wiggle {
  0% {
    transform: rotate(0);
  }
  30% {
    transform: rotate(-15deg);
  }
  70% {
    transform: rotate(15deg);
  }
  100% {
    transform: rotate(0);
  }
}