JSFiddle - React, Tailwind, and code Playground

HTML

<div id="ball"></div>

CSS

@-webkit-keyframes myfirst {
  from {background: red; top: 50px; left: 50px;}
  to {background: yellow; top: 300px; left: 300px;}
}
@-moz-keyframes myfirst {
  from {background: red; top: 50px; left: 50px;}
  to {background: yellow; top: 300px; left: 300px;}
}
#ball {
border-radius: 100%;
position: absolute;
width: 50px;
height: 50px;
    background: red;
     top: 50px; left: 50px;
animation: myfirst 1s linear 0s 2 alternate;
-moz-animation: myfirst 1s linear 0s 2 alternate; /* Firefox */
-webkit-animation: myfirst 1s linear 0s 2 alternate; /* Safari и Chrome */
}