所以我试着用无限循环来动画三个短语，依次放大、淡入、淡出，但在第一次循环迭代后，文本以100%的不透明度弹出几秒钟，然后在动画完成后突然消失。
如果我只播放一次动画，它就不会这样做。
参见GIF：https://i.gyazo.com/24574a5112f8920ce1a37a2fa65f4a40.gif
下面是源代码：

<div class="anim-box">
  <h4 class="loop-phrase" id="move">Move Better</h4>
  <h4 class="loop-phrase" id="heal">Heal Faster</h4>
  <h4 class="loop-phrase" id="live">Live Longer</h4>
</div>

.anim-box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.loop-phrase {
  font-size: 24px;
  opacity: 0;
  position: absolute;
    color: #fff;
}

#move {
  animation: move 2s linear;
}

#heal {
  animation: heal 2s linear;
  animation-delay: 2s;
}

#live {
  animation: live 2s linear;
  animation-delay: 4s;
}

@keyframes move {
  0% {
    transform: scale(1);
    opacity: 0;
  }
  50% {
    transform: scale(2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes heal {
  0% {
    transform: scale(1);
    opacity: 0;
  }
  50% {
    transform: scale(2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes live {
  0% {
    transform: scale(1);
    opacity: 0;
  }
  50% {
    transform: scale(2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

function animateText() {
  const moveText = document.getElementById('move');
  const healText = document.getElementById('heal');
  const liveText = document.getElementById('live');

  let counter = 0;

  setInterval(() => {
    if (counter === 0) {
      moveText.style.opacity = 0;
      setTimeout(() => {
        moveText.style.opacity = 1;
        moveText.style.animation = 'none';
        void moveText.offsetWidth;
        moveText.style.animation = 'move 2s linear';
        counter++;
      }, 1000);
    } else if (counter === 1) {
      healText.style.opacity = 0;
      setTimeout(() => {
        healText.style.opacity = 1;
        healText.style.animation = 'none';
        void healText.offsetWidth;
        healText.style.animation = 'heal 2s linear';
        counter++;
      }, 1000);
    } else if (counter === 2) {
      liveText.style.opacity = 0;
      setTimeout(() => {
        liveText.style.opacity = 1;
        liveText.style.animation = 'none';
        void liveText.offsetWidth;
        liveText.style.animation = 'live 2s linear';
        counter = 0;
      }, 1000);
    }
  }, 3000);
}

window.onload = function() {
  animateText();
};

试图调整不透明度为0%，在1秒的延迟之间的文字动画无济于事。我真的卡住了。