CSS Keyframe实现连续水平滚动时循环起始卡顿问题解决求助

我用CSS的@keyframes和两个完全相同的div标签做了一个水平方向的无限文字滚动效果，但现在碰到了个小麻烦——每次动画循环重新开始的时候，都会有个能察觉到的停顿，我想实现完全无缝的连续滚动，哪怕放弃CSS动画改用JavaScript或者jQuery来做也行。

下面是我目前的实现代码：

CSS代码 #

@keyframes infiniteScroll {
  from {
    transform: translateX(0)
  }

  to {
    transform: translateX(calc(0px - 50%));
  }
}

#scrolling-header-parent-container {
  width: 100%;
  background-color: black;
  overflow-x: hidden;

  #scrolling-header-container {
    display: flex;
    width: fit-content;
    height: 8vh;
    font-size: 30px;
    align-items: center;
    overflow-x: hidden;

    animation-name: infiniteScroll;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

    .scrolling-header-container-item {
      white-space: nowrap;
      color: white;
    }
  }
}

HTML代码 #

<div id="scrolling-header-parent-container">
  <div id="scrolling-header-container">
    <div class="scrolling-header-container-item">
      AUTHENTIC VIETNAMESE FOOD&nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;&nbsp;INDIAN CUISINE&nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;&nbsp;CHURROS & COFFEE&nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;&nbsp;BUBBLE TEA&nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;&nbsp;ESCAPE ROOM EXPERIENCE&nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;&nbsp;SOUFFLE PANCAKE & DESSERT CAFE&nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;&nbsp;COCKTAIL BAR&nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;&nbsp;TAIWANESE FRIED CHICKEN&nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;&nbsp;CHINESE HOTPOT&nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;&nbsp;POLISH STREET FOOD&nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;&nbsp;KOREAN BBQ&nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;&nbsp;
    </div>
    <div class="scrolling-header-container-item">
      AUTHENTIC VIETNAMESE FOOD&nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;&nbsp;INDIAN CUISINE&nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;&nbsp;CHURROS & COFFEE&nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;&nbsp;BUBBLE TEA&nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;&nbsp;ESCAPE ROOM EXPERIENCE&nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;&nbsp;SOUFFLE PANCAKE & DESSERT CAFE&nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;&nbsp;COCKTAIL BAR&nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;&nbsp;TAIWANESE FRIED CHICKEN&nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;&nbsp;CHINESE HOTPOT&nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;&nbsp;POLISH STREET FOOD&nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;&nbsp;KOREAN BBQ&nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;&nbsp;
    </div>
  </div>
</div>

备注：内容来源于stack exchange，提问作者Annabelle Sykes