Имейте два анимационных эффекта на тексте и когда l oop закончен, заканчивайте анимацию

Question

Я пытаюсь, чтобы две анимации воздействовали на текст элемента, а затем заканчивались через заданный интервал.

В этом коде есть код, который у меня есть вместе.

Ссылка CodePen для «рабочего» кода

#textBox {
  position: relative;
  transition: top 1500ms;
  top: 5em;
  overflow: hidden;
}

.slide-in-bottom {
  animation: slideInBottom 750ms cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.slid-out-top {
  animation: slideOutTop 750ms cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

@keyframes slideInBottom {
  0% {
    transform: translateY(5em);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideOutTop {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-5em);
    opacity: 0;
  }
}

«Эффект», к которому я стремлюсь, заключается в том, что когда текст добавляется к элементу, он «скользит» снизу элемента, а затем «скользит» по верху элемента. После того, как интервал прошел через список слов, я очищаю интервал и останавливаю любые анимации.

Я не уверен, должен ли я "запускать" и "останавливать" анимации с помощью JS или использовать CSS чтобы они запускались.

Думаю, у меня правильная анимация. Я просто не уверен, как заставить их работать с моей текущей реализацией.