body {
  margin: 20px;
}

@keyframes jump-up-down {
  0% {
    transform: translate(0, 0) scale(0.9) rotate(0);
    box-shadow: -20px -20px 20px gray;
  }

  25% {
    transform: translate(calc(100vw - 240px), 0) scale(0.6) rotate(180deg);
    background-color: rgb(250, 250, 250);
    box-shadow: -20px 20px 20px gray;
  }

  50% {
    transform: translate(calc(100vw - 240px), calc(100vh - 240px)) scale(0.8)
      rotate(360deg);
    background-color: silver;
    box-shadow: 20px 20px 20px gray;
  }

  75% {
    transform: translate(0, calc(100vh - 240px)) scale(0.7) rotate(540deg);
    box-shadow: 20px -20px 20px gray;
  }

  100% {
    transform: translate(0, 0) scale(0.9) rotate(720deg);
    box-shadow: -20px -20px 20px gray;
  }
}

#rectangle {
  width: 200px;
  height: 200px;
  background-color: black;
  animation: jump-up-down 8s ease-in-out infinite;
}