JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

#sin
{
    width: 402px;
    height: 220px;
    position: relative;
    background-image: url(http://i.stack.imgur.com/abO5T.png);
}

.ball
{
    width: 10px;
    height: 10px;
    background-color: black;
    border-radius: 40px;
    position: absolute;
    top: 48%; 
    left:1%;
    
   animation: myfirst 5s linear infinite;
   -webkit-animation: myfirst 5s linear infinite; /* Safari and Chrome */
}

@keyframes myfirst
{
     6.25%  {top: 21%; left:3%}
    12.5%  {top: 7%; left:11%;}
    18.75%  {top: 12%; left:25%;}
    25% {top: 48%; left:47%;}
    
    31.25%  {top: 84%;  left:71%;}
    37.5% {top: 91%; left: 82%}
    43.75% {top: 73%; left: 92%;}
    50% { top: 47%; left: 94%;}
    
    56.25% {top: 23%; left: 92%;}
    62.5% {top: 6%; left: 82%;}
    68.75% {top: 12%; left: 70%;}
    75% { top: 48%; left:47%; }
    
    81.25% { top: 73%; left: 33%;}
    87.5% { top: 89%; left: 19%;}
    93.75% { top: 84%; left: 7%; } 
    100% { top: 48%;  left:1%;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
    6.25%  {top: 21%; left:3%}
    12.5%  {top: 7%; left:11%;}
    18.75%  {top: 12%; left:25%;}
    25% {top: 48%; left:47%;}
    
    31.25%  {top: 84%;  left:71%;}
    37.5% {top: 91%; left: 82%}
    43.75% {top: 73%; left: 92%;}
    50% { top: 47%; left: 94%;}
    
    56.25% {top: 23%; left: 92%;}
    62.5% {top: 6%; left: 82%;}
    68.75% {top: 12%; left: 70%;}
    75% { top: 48%; left:47%; }
    
    81.25% { top: 73%; left: 33%;}
    87.5% { top: 89%; left: 19%;}
    93.75% { top: 84%; left: 7%; } 
    100% { top: 48%;  left:1%;}
}