JSFiddle - React, Tailwind, and code Playground

by Bradley Mitchell

HTML

<div class="square"></div>

CSS

@keyframes rotate_right {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotate_left {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.square {
  margin:100px auto;
  width:100px;
  height:100px;
  background-color: blue;
  animation: 2s ease rotate_left;
}

.square:hover {
  animation: 2s ease rotate_right;
}