JSFiddle - React, Tailwind, and code Playground

HTML

<div class="ball" />

CSS

.ball {
    background: #000;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    animation-duration: 10s;
    animation-name: rollout;
    animation-iteration-count: infinite;
    
    /* Chrome still requires these prefixes in 2015. */
    -webkit-animation-duration: 10s;
    -webkit-animation-name: rollout;
    -webkit-animation-iteration-count: infinite;
}
@keyframes rollout {
    25% {
        margin-left: 47%;
    }
    50% {
        margin-left: 94%;
    }
    75% {
        margin-left: 47%;
    }
    100% {
        margin-left: 0%;
    }
}
/* Chrome still requires these prefixes in 2015. */
@-webkit-keyframes rollout {
    25% { margin-left: 47%; }
    50% { margin-left: 94%; }
    75% { margin-left: 47%; }
    100% { margin-left: 0%; }
}