CSS divs бесконечный цикл, эффект pacman ⇐ CSS

[Anonymous]

У меня есть контейнер и 6 элементов div внутри. Каждый элемент div имеет ширину 30 рем и высоту 30 рем.

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

.container {
display: flex;
gap: 1rem;
}

.container > div {
display: flex;
flex-direction: column;
gap: 0.2rem;
border-radius: 1rem;
box-shadow: rgba(24, 29, 38, 0.24) 0px 0px 0px, rgba(24, 29, 38, 0.08) 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 0px 0px;
width: 25rem;
border: 1px solid lightgray;
padding: 1rem;

width: 25rem;
height: 25rem;
}

Как я могу создать анимацию, в которой каждый дочерний элемент div будет двигаться влево, как бесконечное преобразование: TranslateX(-), но он выходит за пределы экрана и телепортируется Направо. Как в pacman, где если пойти в одну сторону, то вернуться с другой. Мне нужен этот эффект, но бесконечный.

Подробнее здесь: https://stackoverflow.com/questions/783 ... man-effect