Буферизация ключевого кадра CSS с непрерывной горизонтальной прокруткой в ​​начале цикла ⇐ Html

[Anonymous]

Я запрограммировал непрерывную горизонтальную прокрутку текста, используя CSS @keyframes и два одинаковых тега div.
Проблема, с которой я столкнулся, заключается в том, когда начинается цикл. опять же, перед повторной прокруткой текста происходит небольшая, но заметная пауза. Я бы хотел, чтобы прокрутка была непрерывной, без пауз, даже если это означает не использовать CSS @keyframes, а вместо этого использовать javascript/jQuery.
Мой код приведен ниже. p>

Код: Выделить всё

@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;
}
}
}

Код: Выделить всё

AUTHENTIC VIETNAMESE FOOD   •   INDIAN CUISINE   •   CHURROS & COFFEE   •   BUBBLE TEA   •   ESCAPE ROOM EXPERIENCE   •   SOUFFLE PANCAKE & DESSERT CAFE   •   COCKTAIL BAR   •   TAIWANESE FRIED CHICKEN   •   CHINESE HOTPOT   •   POLISH STREET FOOD   •   KOREAN BBQ   •   

AUTHENTIC VIETNAMESE FOOD   •   INDIAN CUISINE   •   CHURROS & COFFEE   •   BUBBLE TEA   •   ESCAPE ROOM EXPERIENCE   •   SOUFFLE PANCAKE & DESSERT CAFE   •   COCKTAIL BAR   •   TAIWANESE FRIED CHICKEN   •   CHINESE HOTPOT   •   POLISH STREET FOOD   •   KOREAN BBQ   •   

Подробнее здесь: https://stackoverflow.com/questions/793 ... loop-start