Бесконечная горизонтальная анимация прокрутки ⇐ CSS

[Anonymous]

Я пытаюсь создать анимацию бесконечной прокрутки без «мигания» и пустых мест. Проблема в том, что когда я использую максимальную ширину 1300 пикселей, а мой текст внутри элемента списка короткий, я все равно получаю эффект «мигания» и много пустого пространства между последним и первым элементом. Я предполагаю, что мне нужно сделать какие-то вычисления в моей функции Calc, но я не могу обдумать это. У вас есть идеи?

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

const scrollers = document.querySelectorAll(".scroller");

if (!window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
addAnimation();
}

function addAnimation() {
scrollers.forEach((scroller) => {
scroller.setAttribute("data-animated", true);

const scrollerInner = scroller.querySelector(".scroller__inner");
const scrollerContent = Array.from(scrollerInner.children);

scrollerContent.forEach((item) => {
const duplicatedItem = item.cloneNode(true);
duplicatedItem.setAttribute("aria-hidden", true);
scrollerInner.appendChild(duplicatedItem);
});
});
}

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

.scroller {
max-width: 1300px;
border: 2px solid green;
}

.scroller__inner {
padding-block: 1rem;
display: flex;
flex-wrap: wrap;
gap: 1rem;
}

.scroller[data-animated="true"] {
overflow: hidden;
}

.scroller[data-animated="true"] .scroller__inner {
width: max-content;
flex-wrap: nowrap;
animation: scroll var(--_animation-duration, 40s)
var(--_animation-direction, forwards) linear infinite;
}

.scroller[data-direction="right"] {
--_animation-direction: reverse;
}

.scroller[data-direction="left"] {
--_animation-direction: forwards;
}

.scroller[data-speed="fast"] {
--_animation-duration: 20s;
}

.scroller[data-speed="slow"] {
--_animation-duration: 60s;
}

@keyframes scroll {
to {
transform: translate(calc(-50% - 0.5rem));
}
}

/* general styles */
body {
display: grid;
min-block-size: 100vh;
place-content: center;
font-family: system-ui;
font-size: 1.125rem;
background-color: black;
}

.tag-list {
margin: 0;
padding-inline: 0;
list-style: none;
}

.tag-list li {
padding: 1rem;
background: white;
border-radius: 0.5rem;
}

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

[list]
[*]item1
[*]item2
[*]item3
[/list]

Подробнее здесь: https://stackoverflow.com/questions/784 ... -animation