如何让标签文字自动滚动？

<div class="scrolling-text">
  <p>标签文字</p>
</div>

.scrolling-text {
  width: 200px;
  height: 20px;
  overflow: hidden;
}

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

.scrolling-text p {
  animation: scroll 10s linear infinite;
}

window.addEventListener('DOMContentLoaded', function() {
  var textContainer = document.querySelector('.scrolling-text');
  var textElement = textContainer.querySelector('p');
  var textWidth = textElement.offsetWidth;
  var containerWidth = textContainer.offsetWidth;
  var duration = textWidth / 50; // 根据实际情况调整滚动速度

  textElement.style.animationDuration = duration + 's';
});