JSFiddle - React, Tailwind, and code Playground

by Yin Yong

HTML

<div id="ani"></div>

CSS

@-webkit-keyframes next {
  0% {
    transform: translateY(-20%);
  }
  100% {
    transform: translateY(20%);
  }
}

#ani {
  width: 100px;
  height: 100px;
  background: cyan;
  border-radius: 999em;
  position: fixed;
  left: 0;
  top: 0;
  -webkit-animation: next 1s infinite linear alternate;
  -webkit-animation-play-state: running;
}

#ani:hover {
  -webkit-animation-play-state: paused;
}