当使用ngFor时,下面的Css字幕文本堆栈彼此对应

当我使用ngFor提供数据时。

这就是我得到的结果

短信互相发,现在我被卡住了,我不知道怎么解决。

https://stackblitz.com/edit/angular-mzstvh

这是我的HTML

<div class="message-alert ">
<div  class="container pr-0 pl-0 marquee" >
      <div>
          <a *ngFor="let text of messages">
                    {{text}}
          </a>
      </div>
</div>
</div>

我是SCSS

.message-alert {
  border-style: solid ;
  height: 70px;
  background-color: $light_gray;
  font-size: 28px;
  padding-top: 15px;

  &:hover{
    .marquee div {
      display: block;
      width: 200%;
      height: 50px;
      position: absolute;
      overflow: hidden;
      animation-play-state:paused;
    }
  }

  .marquee {
    height: 30px;
    width: 100%;
    overflow: hidden;
    position: relative;
  }

  .marquee div {
    display: block;
    width: 200%;
    height: 50px;
    position: absolute;
    overflow: hidden;
    animation: marquee 20s linear infinite;
  }

  .marquee a{
    float: left;
    width: 50%;
  }
  @keyframes marquee {
    0% {
      left: 100%;
    } 

    95% {
      left: -100%;
    }

    100% {
      left: -100%;
    }
  }
}

对不起,我的英语不好。