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

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

.ball {
  border-radius: 50%;
  background: red;
  height: 5vmin;
  width: 5vmin;
  transform-origin: 12vmin center;
  animation: hop-around 2s infinite, hop-around-pause 4s infinite;
}

@keyframes hop-around {
  0% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(0);
  }
}

@keyframes hop-around-pause {
  50% {
    transform-origin: 12vmin center;
  }
  50.01% {
    transform-origin: center center;
  }
  100% {
    transform-origin: center center;
  }
}