Спустя какое время текст начинает дергаться, не понимаю почему
<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%);
}
}
