如何像新闻报时一样自动向右滚动动画？

.container {
  width: 100%;
  height: 50px;
  overflow: hidden;
  position: relative;
}

.text {
  white-space: nowrap;
  animation: scroll 10s linear infinite;  /* 10s为滚动时长，可以根据需要调整 */
}

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

function autoScroll() {
  var container = document.querySelector('.container');
  var text = document.querySelector('.text');
  var containerWidth = container.offsetWidth;
  var textWidth = text.offsetWidth;
  var duration = textWidth / containerWidth * 10;  /* 计算滚动时长 */
  
  // 设置动画时长和延时
  text.style.animationDuration = duration + 's';
  text.style.animationDelay = '-' + duration + 's';
  
  // 复位滚动位置
  text.style.transform = 'translateX(0%)';
  
  // 强制浏览器重新绘制，触发动画
  void text.offsetWidth;
  
  // 开始滚动
  text.classList.add('scrolling');
  
  // 动画结束后重新开始滚动
  setTimeout(function() {
    text.classList.remove('scrolling');
    autoScroll();
  }, duration * 1000);
}

// 页面加载后开始滚动
window.addEventListener('load', autoScroll);

<div class="container">
  <div class="text">这里是需要滚动的文本内容</div>
</div>