<div class="wall">
  <div class="monkey">🐵</div>
  <div class="banana">🍌</div>
</div>

.banana {
  font-size: 100px;

  --time: 4s;

  animation: translate var(--time), rotate var(--time), scale var(--time),
    bite var(--time);
  animation-iteration-count: infinite;
}

@keyframes scale {
  0%,
  50% {
    scale: 1;
  }

  51% {
    scale: 0.9;
  }

  60%,
  100% {
    scale: 0.5;
  }
}

@keyframes translate {
  10%,
  20% {
    translate: 20px -40px;
  }

  25%,
  50% {
    translate: 0 -20px;
  }

  51% {
    translate: 100px -40px;
  }

  60%,
  70% {
    translate: 200px -40px;
  }

  95% {
    translate: 200px 70px;
  }

  100% {
    translate: 240px 80px;
  }
}

@keyframes rotate {
  10%,
  20% {
    rotate: -40deg;
  }

  25%,
  50% {
    rotate: -20deg;
  }

  60%,
  70% {
    rotate: 1.5turn;
  }

  100% {
    rotate: 2turn;
  }
}

@keyframes bite {
  14%,
  100% {
    /* bite */
    clip-path: polygon(0% 99%, 1% 0%, 49% 14%, 100% 1%, 100% 100%);
  }
}

body {
  background: #e0218a;
}

.wall {
  margin-block-start: 8rem;
  margin-inline: auto;

  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 600px;

  background: url("https://images.unsplash.com/photo-1517524285303-d6fc683dddf8");
  background-size: contain;
  box-shadow: rgba(88, 188, 255, 0.5) 0 0 2px 2px;
}

.monkey {
  font-size: 100px;
  position: relative;
  left: 6.5rem;
  top: -7.5rem;
}