JSFiddle - React, Tailwind, and code Playground

by Aleksandr Tomashov

HTML

<div class="circle play">

</div>

CSS

.circle {
  height: 50px;
  width: 50px;
  border-radius:50%;
  background-color: orange;
  position: relative;
} 
@keyframes play {
  from {left: 0;}
  to {left: calc(100% - 50px);}
}
.play {
  animation: play 4s infinite alternate;
}
.play:hover{
  animation-play-state: paused;
  }