Реагировать на анимацию бесконечной прокрутки изображения ⇐ CSS

[Anonymous]

Я пытаюсь создать анимацию бесконечной прокрутки для некоторых изображений. Проблема в том, что изображения имеют странное поведение при переходе по завершении анимации. Я реализовал то же самое с текстом, и он работает без проблем, но не с изображениями.
CSS:

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

.outter-scroller{
overflow: hidden;
-webkit-mask: linear-gradient(
90deg,
transparent,
white 20%,
white 80%,
transparent
);
mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}
.inner-scroller{
width: max-content;
flex-wrap: nowrap;
animation: scroll 20s linear infinite;
animation-fill-mode: forwards;
}

JSX:

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

import { useEffect } from "react"

const sourceImages = ['src/assets/ic1.jpg', 'src/assets/ic2.jpg', 'src/assets/ic3.jpg', 'src/assets/ic4.jpg', 'src/assets/ic4.jpg', 'src/assets/ic5.jpg', 'src/assets/ic6.jpg', 'src/assets/ic7.jpg', 'src/assets/ic8.jpg']

const ImageSectionAnimatedAuto = () => {
useEffect(() => {
const handleAnimation = () => {
const scrollerInner = document.querySelector('.inner-scroller')
const scrollerContent = Array.from(scrollerInner.children)
scrollerContent.forEach((item) => {
const duplicatedItem = item.cloneNode(true)
scrollerInner.appendChild(duplicatedItem)
})
}
handleAnimation()
}, [])
return (

Infinite scroll

[list]
{["HTML", "CSS", "JAVASCRIPT", "SSG", "WEBDEV", "ANIMATION", "UI/UX"].map((item) => (
[*]{item}
))}
[/list]


{sourceImages.map((image, _i) => (
[img]{image} className=[/img]
))}



)
}

export default ImageSectionAnimatedAuto

Я просто пытаюсь воссоздать это: https://codepen.io/kevinpowell/pen/BavVLra

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