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: yellow; top: 300px; left: 300px;
    -webkit-animation: myfirst 2s linear 0s 1; -moz-animation: myfirst 2s linear 0s 1;
}