Html 逐字设置文本动画

我有一个文本，我想在ViewInit之后变换

以创建某种淡入动画。
我希望这个文本是动画字对字，在每个跨度之间有一个短暂的延迟，使他们被动画连续

<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>

我不确定如何在纯CSS中设置单词的动画，但我创建了一个库，为Angular实现了这一点。我不确定如何在纯CSS中设置单词的动画，但我创建了一个库，为Angular实现了这一点。
.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);
}