:root {
  --width: 250px;
  --height: calc(var(--width) / 2);
}

body {
  margin: 0;
  background-color: lightblue;
  animation: bgChange 1s linear infinite alternate;
}

.bounce {
  width: var(--width);
  height: var(--height);
  background: url('/nti-animations/images/images.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  animation: toRight 6.8s linear infinite alternate,
             bounce 17s linear infinite alternate;
}

@keyframes bounce {
  0%   { top: 0; }
  50%  { top: calc(100% - var(--height)); }
  100% { top: 0; }
}

@keyframes toRight {
  0%   { left: 0; }
  100% { left: calc(100% - var(--width)); }
}

/* Background drastically changes at each corner */
@keyframes bgChange {
  0%   { background-color: lightblue; }   /* top-left */
  25%  { background-color: lightgreen; }  /* top-right */
  50%  { background-color: lightcoral; }  /* bottom-right */
  75%  { background-color: gold; }        /* bottom-left */
  100% { background-color: lightblue; }   /* back to top-left */
}