JSFiddle - React, Tailwind, and code Playground

by anberlin

HTML

<div class="wrapper">
    <div class="inner"></div>
</div>

CSS

.wrapper,
.inner {
  position: absolute;
  width: 100px;
  height: 100px;
  
  animation-name: rotate;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.wrapper {
    left: 40px;
    top: 40px;
    
    animation-duration: 2.5s;
    animation-play-state: paused;
    animation-direction: reverse;
}
.wrapper:hover {
    animation-play-state: running;
}
.inner {
  display: block;
  background-color: red;
  animation-duration: 1.5s;
}
@keyframes rotate {
  from { transform: rotate(0deg);  }
  to {    transform: rotate(360deg);  }
}