如何在不重置CSS旋转的情况下停止动画(示例最好地解释了这一点)

<div class="box"></div>
<button onclick="toggleAnimation()">停止动画</button>

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

function toggleAnimation() {
  var box = document.querySelector('.box');
  box.style.animationPlayState = (box.style.animationPlayState === 'paused') ? 'running' : 'paused';
}