如何在列表(li)元素上进行无限水平滚动

<div class="container">
  <ul class="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item 9</li>
    <li>Item 10</li>
  </ul>
</div>

.container {
  width: 400px;
  overflow: hidden;
}

.list {
  display: flex;
  width: max-content;
  height: 100px;
  padding: 0;
  margin: 0;
  list-style: none;
  animation: scroll 10s linear infinite;
}

.list li {
  flex: 0 0 100px;
  height: 100%;
  text-align: center;
  background-color: #ccc;
  margin-right: 10px;
}

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