无限水平动画：如何使其平滑？

Question

我制作了一个基本的文本动画，其中文本从左向右移动。它可以正常工作，但是当最后一个跨度达到100％时，它会直接跳到0％，而没有任何过渡。

这是我目前所拥有的一小段内容。哦，有什么方法可以消除动画中我们在文字上看到的小毛刺？

max(combn(df[,(1:5)],df$Lanes,FUN = function(i) rowSums(df[,(1:5)][i])))

html {
  min-height: 100%;
}

.container{
  display: flex;
  flex-direction: row;
  animation: left-to-right-animation 6s linear infinite;
}

@keyframes left-to-right-animation {
  0%  { transform: translate(-20%, 0%);}
  100%{ transform: translate(120%, 0%);}
}

.title{
  width: 100%;
}

p.about {
  font-size: 4em;
  font-weight: 400;
  top: 0;
  left: 0;
  margin: 20px;
  white-space: nowrap;
  text-rendering: optimizeSpeed;
}