<svg class="ball" width="70px" height="70px" viewBox="0 0 70 70">
  <circle cx="45" cy="45" r="25"/>
</svg>
.ball{
  fill:#000;
  animation: animation-name-you-pick 2s 2s 3 alternate ease-in-out forwards;
}
@keyframes animation-name-you-pick {
  0% {
   fill: blue;
   transform: translateX(0);
 }
  50% {
   fill: purple;
   transform: translateX(50px);
 }
  100% {
   fill: 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.