如何使用HTML按钮暂停CSS动画？

<button id="pauseButton">暂停动画</button>
<div id="animatedElement"></div>

@keyframes myAnimation {
  0% { background-color: red; }
  50% { background-color: blue; }
  100% { background-color: green; }
}

#animatedElement {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: myAnimation 3s infinite;
}

var animatedElement = document.getElementById('animatedElement');
var pauseButton = document.getElementById('pauseButton');
var isPaused = false;

pauseButton.addEventListener('click', function() {
  if (isPaused) {
    animatedElement.style.animationPlayState = 'running';
    pauseButton.textContent = '暂停动画';
  } else {
    animatedElement.style.animationPlayState = 'paused';
    pauseButton.textContent = '播放动画';
  }
  
  isPaused = !isPaused;
});