JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<span></span>

CSS

span {
	border: 1px solid lightblue;
	border-width: 17px 22px 7px 2px;
	border-radius: 50%;
	display: inline-block;
	height: 20px;
	width: 20px;
	-webkit-animation: rotate 5000s -.0625s infinite linear forwards;
	animation: rotate 5000s -.0625s infinite linear forwards;
	transition: animation-duration 5s ease;
}

span:hover {
  cursor: pointer;
  animation-duration: .5s;
  _animation-play-state: running;
}

@keyframes rotate {
	0% { border-width: 17px 22px 7px 2px; }
  25% { border-width: 22px 7px 2px 17px; }
  50% { border-width: 7px 2px 17px 22px; }
  75% { border-width: 2px 17px 22px 7px; }
}
@-webkit-keyframes rotate {
	0% { border-width: 15px 20px 5px 2px; }
  25% { border-width: 20px 5px 2px 15px; }
  50% { border-width: 5px 2px 15px 20px; }
  75% { border-width: 2px 15px 20px 5px; }
}