如何确保即使用户停止悬停也能完成CSS动画？

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

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

<div class="box" onmouseover="startAnimation()" onmouseout="stopAnimation()"></div>

<script>
  function startAnimation() {
    document.querySelector('.box').classList.add('animation');
  }

  function stopAnimation() {
    document.querySelector('.box').classList.remove('animation');
  }
</script>

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: red;
  }

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

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

.animation {
  transition-property: opacity;
  transition-duration: 2s;
  opacity: 1;
}

.box:hover {
  opacity: 0;
}