.triangle-down-min {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 25px solid #2effc7;
  margin-top: -30px;
  animation: triangle-bounce 5s linear 35s 3;
}

.triangle-down-max {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-top: 40px solid #ce5b78;
  animation: triangle-bounce 5s linear 15s 3;
}

@keyframes triangle-bounce {
  0% {
    transform: translateY(0);
  }
  5% {
    transform: translateY(-15px);
  }
  8% {
    transform: translateY(-5px);
  }
  11% {
    transform: translateY(-15px);
  }
  14% {
    transform: translateY(-5px);
  }
  17% {
    transform: translateY(-15px);
  }
  20% {
    transform: translateY(-5px);
  }
  23% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}