如何在图像上暂停鼠标悬停时的动画

<div class="image-container">
  <img src="your-image.jpg" alt="Your Image">
</div>

.image-container {
  position: relative;
  width: 300px;
  height: 200px;
}

.image-container img {
  width: 100%;
  height: 100%;
  animation: animateImage 1s infinite;
}

@keyframes animateImage {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

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

const imageContainer = document.querySelector('.image-container');
const image = imageContainer.querySelector('img');

imageContainer.addEventListener('mouseover', () => {
  image.classList.add('paused');
});

imageContainer.addEventListener('mouseout', () => {
  image.classList.remove('paused');
});