当你停止悬停在文本上时，如何让动画开始？

<div id="text">Hover over me</div>

#text {
  width: 100px;
  height: 100px;
  background-color: #ff0000;
  color: #ffffff;
  text-align: center;
  line-height: 100px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#text.animate {
  animation: myAnimation 1s infinite alternate;
}

@keyframes myAnimation {
  0% { background-color: #ff0000; }
  100% { background-color: #00ff00; }
}

var textElement = document.getElementById("text");

textElement.addEventListener("mouseenter", function() {
  textElement.classList.add("animate");
});

textElement.addEventListener("mouseleave", function() {
  textElement.classList.remove("animate");
});