<div class="ball"></div>

body {   display: flex;   align-items: center;   justify-content: center;   height: 100vh; }

.ball {
  position: relative;
  border-radius: 50%;
  background: red;
  height: 4vmin;
  width: 4vmin;
  animation: slide-right 2s infinite, slide-right-pause 4s infinite;
}

@keyframes slide-right {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(100px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes slide-right-pause {
  50% {
    left: 0;
  }
  75%  {
    left: -100px;
  }
  100% {
    left: 0;
  }
}