如何在带有按钮的div中为水平滚动设置动画

<div class="container">
  <button onclick="scrollLeft()">滚动</button>
  <div class="content">
    <!-- 在这里添加要滚动的内容 -->
  </div>
</div>

.container {
  width: 300px;
  overflow: hidden;
  position: relative;
}

.content {
  white-space: nowrap;
  animation: scroll 10s linear infinite;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

function scrollLeft() {
  var content = document.querySelector('.content');
  content.style.animationPlayState = 'running';
}