loop a css animation with multiple keyframe

let index = 1;

function repeatAnimation() {
  const arrow = document.querySelector('.arrow');

  if (index === 1) {
    arrow.style.animationName = 'slideIn';
    index = 0;
  } else {
    arrow.style.animationName = 'slideOut';
    index = 1;
  }

}

setInterval(repeatAnimation, 2000);

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f4f4f4;
  color: #EE4036;
  font-family: Arial, sans-serif;
  font-weight: bolder;
  font-size: xx-large;
}

.arrows {
  display: flex;
  justify-content: start;
  align-items: start;
  padding-left: 6px;
  gap: 3px;
}


/* Common styles for arrows */

.arrow {
  position: relative;
  width: 10px;
  height: 10px;
  background: #EE4036;
  border-top-right-radius: 30%;
  transform: rotate(-60deg) skewX(-30deg) scale(1, .866);
  rotate: 90deg;
  opacity: 0;
  animation: slideInOut 6s infinite;
}

.arrow::before,
.arrow::after {
  content: "";
  position: absolute;
  width: inherit;
  height: inherit;
  background: inherit;
  border-top-right-radius: inherit;
}

.arrow::before {
  background: #EE4036;
  transform: rotate(-135deg) skewX(-45deg) scale( 1.414, .707) translateY(-50%);
}

.arrow::after {
  background: #EE4036;
  transform: rotate(135deg) skewY(-45deg) scale( .707, 1.414) translateX(50%);
}

@keyframes slideIn {
  from {
    transform: translateY(100%) rotate(-60deg) skewX(-30deg) scale(1, .866);
    opacity: 0;
  }
  to {
    transform: translateY(0) rotate(-60deg) skewX(-30deg) scale(1, .866);
    opacity: 1;
  }
}

@keyframes slideOut {
  from {
    transform: translateY(100%) rotate(-60deg) skewX(-30deg) scale(1, .866);
    opacity: 1;
    left: 10px;
  }
  to {
    transform: translateY(0) rotate(-60deg) skewX(-30deg) scale(1, .866);
    opacity: 0;
    left: 10px;
  }
}

.arrow {
  opacity: 0;
  animation: slideIn 0.5s forwards, slideOut 0.5s forwards, repeatSequence 2s infinite;
}

.arrow_1 {
  animation-delay: 0s, 2.5s;
}

.arrow_2 {
  animation-delay: 0.5s, 2s;
}

.arrow_3 {
  animation-delay: 1s, 1.5s;
}

<section>
  <div class="loading">Loading</div>
  <section class="arrows">
    <div class="arrow arrow_1"></div>
    <div class="arrow arrow_2"></div>
    <div class="arrow arrow_3"></div>
  </section>
</section>