.arrow-slide {
  animation: slide 1.5s infinite;
  -webkit-animation: slide 1.5s infinite;
  opacity: 0;
}

@for $i from 1 through 3 {
  $delayValue: $i * 0.2s;
  .arrow-delay-#{$i} {
    animation-delay: $delayValue;
    -webkit-animation-delay: $delayValue;
  }
}

@-webkit-keyframes slide {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  33% {
    opacity: 1;
    transform: translateY(-5px);
  }
  66% {
    opacity: 0;
    transform: translateY(0px);
  }
  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}
@keyframes slide {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  33% {
    opacity: 1;
    transform: translateY(-5px);
  }
  66% {
    opacity: 0;
    transform: translateY(0px);
  }
  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}