CSS Keyframe Kontinuierliche horizontale Bildlaufpufferung beim Schleifenstart ⇐ HTML

[Guest]

Ich habe einen kontinuierlichen horizontalen Textlauf mit CSS @keyframes und zwei identischen div-Tags programmiert.
Das Problem, mit dem ich konfrontiert bin, ist, wann die Schleife beginnt Auch hier gibt es eine kleine, aber spürbare Pause, bevor der Text erneut scrollt. Ich möchte, dass das Scrollen kontinuierlich und ohne Pause erfolgt, auch wenn das bedeutet, dass ich kein CSS @keyframes und stattdessen Javascript/jQuery verwende.
Mein Code ist unten.

Code: Select all

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

Code: Select all

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   •