js文字如何轮播？

<div class="td-style">
  <span class="td-text">内容1内容1内容1内容1内容1内容1</span>
</div>
css：
<style>
    .td-style {
      width: 160px;
      height: 72px;
      overflow: hidden;
      white-space: nowrap;
      font-size: 26px;
      line-height: 72px;
    }
    .td-text {
      display: inline-block;
      white-space: nowrap;
      animation: scrollLeft 3s linear infinite;
    }
    .td-text:hover {
      animation-play-state: paused;
    }
     /* 定义动画 */
    @keyframes scrollLeft {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(calc(-90% - 0px)); /* 加上一些额外的空白，以便滚动到最后一个元素时不会立即切换 */
      }
    }
</style>