如何在css中重新启动组动画？

<div class="box"></div>
<button onclick="restartAnimation()">重新启动动画</button>

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100px);
  }
}

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: slide 1s infinite;
}

.restart {
  animation: none;
}

function restartAnimation() {
  var box = document.querySelector('.box');
  box.classList.add('restart');
  setTimeout(function() {
    box.classList.remove('restart');
  }, 10);
}