JSFiddle - React, Tailwind, and code Playground

by Ravindra Athreya

HTML

<div class="test">
&nbsp;
</div>

CSS

.test{
  width:100px;
  height:100px;
  border1: 1px solid red;
  border-radius: 50%;
  display:inline-block;
  position:relative;
  background-color:red;
  -webkit-animation: yoyo 5s linear 2s infinite alternate;
  animation: yoyo 5s ease-in-out 2s infinite alternate ;
}

@-webkit-keyframes yoyo {
    0%   {top: 0px;}
    25%  {top: 200px;}
    75%  {top: 50px}
    100% {top: 100px;}
}

@keyframes yoyo {
    0%   {top: 0px;}
    25%  {top: 200px;}
    75%  {top: 50px}
    100% {top: 100px;}
}