如何使动画即使不悬停也能继续播放

.animation {
  animation-name: myAnimation;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-play-state: running;
}

@keyframes myAnimation {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}

<div id="animation" style="width: 100px; height: 100px; background-color: red;"></div>

<script>
  var animation = document.getElementById("animation");

  animation.addEventListener("mouseover", function() {
    animation.style.animationPlayState = "running";
  });

  animation.addEventListener("mouseout", function() {
    animation.style.animationPlayState = "paused";
  });
</script>

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

<script>
  var animation = document.getElementById("animation");

  animation.addEventListener("mouseover", function() {
    animation.classList.remove("paused");
  });

  animation.addEventListener("mouseout", function() {
    animation.classList.add("paused");
  });
</script>

<style>
  .animation {
    animation-name: myAnimation;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-play-state: running;
  }

  .animation.paused {
    animation-play-state: paused;
  }

  @keyframes myAnimation {
    0% { transform: translateX(0); }
    100% { transform: translateX(100px); }
  }
</style>