Почему дергается текст в бесконечной бегущей строке?

Question

[katiiisha]

Спустя какое время текст начинает дергаться, не понимаю почему

<div class="running_line">
            <div class="line_inner">

                <span class="font_nav running_line_text">put some fire in your belly</span>
                <span class="font_nav running_line_text">put some fire in your belly</span>
                <span class="font_nav running_line_text">put some fire in your belly</span>
                <span class="font_nav running_line_text">put some fire in your belly</span>
                <span class="font_nav running_line_text">put some fire in your belly</span> 
            </div>
            
        </div>

.running_line_text {
    font-size: 17px;
    line-height: 25.92px;
    margin: 0 28px 0 28px; 

}
.running_line {
    box-sizing: border-box;
    width: 697px;
    height: 78px;
    border: 1px solid #000;
    display: flex;
    align-items: center;
    overflow: hidden;
  
    
}
.line_inner {
    display: flex;
    width: 200%; 
    animation: running_line 10s linear infinite;
    white-space: nowrap;
}
.running_line span {
    white-space: nowrap;
    width: 100%;
}

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

Comments

[szQocks]

дёргается, потому что анимация заканчивается и блок возвращается на ту позицию на которой был изначально

если нужен бесконечный текст бегущий текст, нужно анимировать 2 блока

[szQocks]

хотя нет, обманываю, с 1 получилось https://codepen.io/kapysta-xxl/pen/XWowEpr

[katiiisha]

szQocks, да я уже добавила второй блок тоже, но решение с одним мне нравится больше, спасибо большое!