JSFiddle - React, Tailwind, and code Playground

by pradeep

HTML

<div class="container">
   <div class="path">
       <div class="ball"></div>
   </div>
</div>

CSS

div.path {
    background:url(https://dl.dropboxusercontent.com/u/10268257/images/path.png) no-repeat center bottom;
    width:397px;
    height:66px;
    position: relative;
}

div.ball {
    background : green;
    width:20px; height:20px;


    border-radius:50%;
    
    -webkit-animation: myOrbit 2s linear forwards; /* Chrome, Safari 5 
            animation: myOrbit 4s linear infinite; /* Chrome, Firefox 16+, 
                                                      IE 10+, Safari 5 */
    
}



@keyframes myOrbit {
    0% { transform: translateX(10px)  translateY(10px) }
      50%   { transform:  translateX(50px)   translateY(50px)}
     100%   { transform:  translateX(70px)   translateY(70px)}
}