<div class="ball"></div>
.ball{
  border-radius: 50%;
  width: 50px;
  height: 50px;
  margin: 20px; 
  background: black;
  animation: animation-name-you-pick 2s 2s 3 alternate ease-in-out forwards;
}
@keyframes animation-name-you-pick {
  0% {
   background: blue;
   transform: translateX(0);
 }
  50% {
   background: purple;
   transform: translateX(50px);
 }
  100% {
   background: red;
   transform: translateX(100px);
 }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.