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

.banana {
  font-size: 100px;
  animation: eat 4s infinite;
}

@keyframes eat {
  10%,
  20% {
    transform: translate(20px, -40px) rotate(-40deg);
  }

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

  25%,
  50% {
    transform: translate(0, -20px) rotate(-20deg);
  }

  51% {
    transform: translate(100px, -40px) rotate(-20deg) scale(0.9);
  }

  60%,
  70% {
    transform: translate(200px, -40px) rotate(1.5turn) scale(0.5);
  }

  95% {
    transform: translate(200px, 70px) rotate(2turn) scale(0.5);
  }

  100% {
    transform: translate(240px, 80px) rotate(2turn) scale(0.5);
  }
}

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;
}