如何格式化<div>中的文本以平滑地滚动动画？

<div class="scrolling-text">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

.scrolling-text {
  width: 300px; /* 设置容器宽度 */
  height: 100px; /* 设置容器高度 */
  overflow: hidden; /* 隐藏超出容器范围的内容 */
  white-space: nowrap; /* 禁止文本换行 */
}

function scrollText() {
  var container = document.querySelector('.scrolling-text');
  var text = container.innerHTML;
  container.innerHTML = text + ' ' + text; // 复制文本内容以实现无缝滚动

  var distance = container.offsetWidth; // 获取容器宽度
  var duration = text.length * 50; // 根据文本长度计算滚动时间

  container.style.animation = 'scroll ' + duration + 'ms linear infinite'; // 设置滚动动画
}

scrollText();

@keyframes scroll {
  0% {
    transform: translateX(0); /* 初始位置 */
  }
  100% {
    transform: translateX(-100%); /* 滚动到最左侧 */
  }
}