animation 实现无限无缝滚动

<div class="scrolling-content">
  <div class="item">
    <p>滚动的内容 1</p>
    <p>滚动的内容 2</p>
    <p>滚动的内容 3</p>
  </div>
  <!-- 以下是复制的内容 -->
  <div class="item">
    <p>滚动的内容 1</p>
    <p>滚动的内容 2</p>
    <p>滚动的内容 3</p>
  </div>
</div>

.scrolling-content {
  display: flex;
  width: 200px;
  /* 容器宽度 */
  overflow: hidden;
  /* 隐藏超出容器的内容 */
}

.item {
  display: flex;
  /* 使用 flex 布局使内容横向排列 */
  white-space: nowrap;
  /* 防止内容换行 */
  animation: scroll 10s linear infinite;
  /* 应用动画 */
}

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

  100% {
    transform: translateX(-100%);
  }

  /* 向左移动内容宽度 */
}

预览

https://jsbin.com/purenet/edit?html,css,output