title: Animate text word for word
body: <p>I have a text I want to transform <code>afterViewInit</code> to create some kind of fade in animation.
  I want this text to be animated word for word with a short delay in between each span, so that they are being animated consecutive. </p>
  
  <pre><code>&lt;div class="normal position-fixed align-to-top"&gt;
    &lt;div [style.opacity]="opacity" class="row mt-5"&gt;
      &lt;div class="col-6 offset-3 text-justify"&gt;
        &lt;p&gt;
          &lt;span class="start-animation" [class.enter-animation]="animation"&gt;Nørebro Studios&lt;/span&gt; is a creative &amp; digital design agency
          that partners with ambitious creatives to create bold
          brande experiences for people, worldwide.
        &lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My approach was to create multiple <code>span</code>s that contain each 1-2 words. As you might see, I've solely animated one span yet. It works - <strong>but how do I animate the following words with a delay?</strong> For the first span I set <code>animation = true</code> after view init. </p>
  
  <p><br><br>
  FYI CSS: </p>
  
  <pre><code>.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);
  }
  </code></pre>