如何在鼠标关闭时反转@keyframe动画？

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

.myElement {
  animation: myAnimation 2s linear infinite;
}

<button id="toggleButton">Toggle Animation</button>

var toggleButton = document.getElementById("toggleButton");
var myElement = document.querySelector(".myElement");

toggleButton.addEventListener("click", function() {
  if (myElement.style.animationPlayState === "running") {
    myElement.style.animationPlayState = "paused";
  } else {
    myElement.style.animationPlayState = "running";
  }
});