Анимировать текст дословно

Question

У меня есть текст, который я хочу преобразовать afterViewInit, чтобы создать какое-то затухание в анимации.Я хочу, чтобы этот текст был слово в слово с короткой задержкой между каждым промежутком, чтобы они анимировались последовательно.

<div class="normal position-fixed align-to-top">
  <div [style.opacity]="opacity" class="row mt-5">
    <div class="col-6 offset-3 text-justify">
      <p>
        <span class="start-animation" [class.enter-animation]="animation">Nørebro Studios</span> is a creative & digital design agency
        that partners with ambitious creatives to create bold
        brande experiences for people, worldwide.
      </p>
    </div>
  </div>
</div>

Мой подход состоял в том, чтобы создать несколько span s, которые содержат каждые 1-2 слова.Как вы можете видеть, я пока что анимировал только один промежуток.Это работает - но как мне анимировать следующие слова с задержкой? Для первого промежутка, который я установил animation = true после просмотра init.

FYI CSS:

.start-animation {
  -webkit-transition: opacity .2s cubic-bezier(.4,0,1,1),-webkit-transform .2s cubic-bezier(.4,0,1,1);
  transition: opacity .2s cubic-bezier(.4,0,1,1),-webkit-transform .2s cubic-bezier(.4,0,1,1);
  transition: transform .2s cubic-bezier(.4,0,1,1),opacity .2s cubic-bezier(.4,0,1,1);
  transition: transform .2s cubic-bezier(.4,0,1,1),opacity .2s cubic-bezier(.4,0,1,1),-webkit-transform .2s cubic-bezier(.4,0,1,1);
  display: block;
  opacity: 0;
  -webkit-transform: translate3d(0,100%,0);
  transform: translate3d(0,100%,0);
}

.enter-animation {
  -webkit-transition: opacity .5s cubic-bezier(0,0,.2,1),-webkit-transform .5s cubic-bezier(0,0,.2,1);
  transition: opacity .5s cubic-bezier(0,0,.2,1),-webkit-transform .5s cubic-bezier(0,0,.2,1);
  transition: transform .5s cubic-bezier(0,0,.2,1),opacity .5s cubic-bezier(0,0,.2,1);
  transition: transform .5s cubic-bezier(0,0,.2,1),opacity .5s cubic-bezier(0,0,.2,1),-webkit-transform .5s cubic-bezier(0,0,.2,1);
  transition-property: transform, opacity, -webkit-transform;
  transition-duration: 0.5s, 0.5s, 0.5s;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1), cubic-bezier(0, 0, 0.2, 1), cubic-bezier(0, 0, 0.2, 1);
  transition-delay: 0s, 0s, 0s;
  opacity: 1;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}