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

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  min-height: 100vh;

  display: flex;
  gap: 40px;
  align-items: center;
  justify-content: center;

  font-family: "Exo", Arial, sans-serif;
  background-color: #151522;
}

.ball {
  height: 10vmin;
  width: 10vmin;
  border-radius: 50%;
  background: #f36;
}

@property --x {
  inherits: false;
  initial-value: 0%;
  syntax: "<percentage>";
}

@property --y {
  inherits: false;
  initial-value: 0%;
  syntax: "<percentage>";
}

@property --rotate {
  inherits: false;
  initial-value: 0deg;
  syntax: "<angle>";
}

.ball {
  animation: throw 1s infinite alternate ease-in-out;
  transform: translateX(var(--x)) translateY(var(--y)) rotate(var(--rotate));
}

@keyframes throw {
  0% {
    --x: -500%;
    --rotate: 0deg;
  }
  50% {
    --y: -250%;
  }
  100% {
    --x: 500%;
    --rotate: 360deg;
  }
}