body{

  background:pink;

}

@keyframes slide {
  0% {
    left: 0;
    top: 0;
  }
  50% {
    left: 1000px;
    top: 1000px;
  }
  100% {
    left: 1000px;
    top: 0;
  }
}
.stage {
  background: white;
  border-radius: 1000px;
  height: 1000px;
  position: relative;
  min-width: 1000px;
}
.stage:hover .ball {
  animation: slide 3s ease-in-out 2s infinite alternate;
}
.stage:active .ball {
  animation-play-state: paused;
}
.ball {
  background: black;
  border-radius: 100%;
  height: 200px;
  position: absolute;
  width: 200px;
}