<div class="stage"> <figure class="ball"></figure> </div>
@keyframes slide { 0% { left: 0; top: 0; } 50% { left: 244px; top: 100px; } 100% { left: 488px; top: 0; } } .stage { background: #eaeaed; border-radius: 6px; height: 150px; position: relative; min-width: 538px; } .stage:hover .ball { animation: slide 2s ease-in-out .5s infinite alternate; } .stage:active .ball { animation-play-state: paused; } .ball { background: #2db34a; border-radius: 50%; height: 50px; position: absolute; width: 50px; } figure { margin: 0; }