如何在点击时停止动画

<div class="animation-element"></div>

.animation-element {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: myAnimation 2s infinite;
}

@keyframes myAnimation {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

var animationElement = document.querySelector('.animation-element');

animationElement.addEventListener('click', function() {
  if (animationElement.style.animationPlayState === 'paused') {
    animationElement.style.animationPlayState = 'running';
  } else {
    animationElement.style.animationPlayState = 'paused';
  }
});

<div class="animation-element"></div>

.animation-element {
  width: 100px;
  height: 100px;
  background-color: red;
}

@keyframes myAnimation {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

var animationElement = document.querySelector('.animation-element');
var animationTimer;

function animate() {
  var rotation = 0;

  function rotate() {
    animationElement.style.transform = 'rotate(' + rotation + 'deg)';
    rotation += 1;
    animationTimer = requestAnimationFrame(rotate);
  }

  rotate();
}

animate(); // 开始动画

animationElement.addEventListener('click', function() {
  cancelAnimationFrame(animationTimer);
});