如何防止关键帧动画在再次滚动时重新启动？

.animation {
  animation-name: myAnimation;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

@keyframes myAnimation {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

<div class="animation"></div>

<script>
  const animationElement = document.querySelector('.animation');
  animationElement.addEventListener('animationend', () => {
    animationElement.classList.remove('animation');
  });
</script>

<style>
  .animation {
    animation-name: myAnimation;
    animation-duration: 2s;
  }

  @keyframes myAnimation {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
</style>

<div class="animation"></div>

<script>
  const animationElement = document.querySelector('.animation');
  window.addEventListener('scroll', () => {
    animationElement.style.animationPlayState = 'paused';
  });
</script>

<style>
  .animation {
    animation-name: myAnimation;
    animation-duration: 2s;
    animation-play-state: running;
  }

  @keyframes myAnimation {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
</style>