JSFiddle - React, Tailwind, and code Playground

HTML

<div class="inherit"></div>
<p><b>Note:</b> When the Animation gets completed,
  the element retracts to it original State </p>

CSS

.inherit{
width:200px;
height:200px;
background:#0693CA;
animation-name:demo;
animation-duration:4s;
animation-delay:2s;
animation-iteration-count:6;
-webkit-animation-name:demo; /* Prefix for Safari and Chrome */
-webkit-animation-duration:4s;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:6;
border-radius:99px;
}

@keyframes demo
{
    0% {transform:translate(0px);
        animation-timing-function:ease-in-out;}
    
 100% {transform:translate(200px);
       animation-timing-function:ease-in-out;}
}

@-webkit-keyframes demo /* Prefix for Safari and Chrome */
{
 0% {-webkit-transform:translate(0px);
    -webkit-animation-timing-function:ease-in-out;}
  
 100% {-webkit-transform:translate(200px);
       -webkit-animation-timing-function:ease-in-out;}
}