Создание бесконечной горизонтальной прокрутки (например, Ring) ⇐ CSS

[Anonymous]

Я пытаюсь создать контейнер, который имеет дочерние элементы по горизонтали и перемещается слева направо

Каждый из этих дочерних элементов, когда он достигает конца контейнера => переходит в начало контейнера

представим, что он содержит 4 дочерних элемента:

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

  0% :  ..1 | 2 | 3 | 4..
25% :  ..4 | 1 | 2 | 3..
50% :  ..3 | 4 | 1 | 2..
75% :  ..2 | 3 | 4 | 1..
100% :  ..1 | 2 | 3 | 4..

not like the carousel, but like the ring rolling (smooth )

for infinite time
Below

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

.container {
height: 200px;
width: 800px;
border: 1px solid #333;
overflow: hidden;
margin: 25px auto;
}

.box {
background: orange;
height: 180px;
margin: 10px;
animation-name: move;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-direction: right;
animation-timing-function: linear;
display: flex;
}

.card {
background: #fff;
height: 150px;
min-width: 100px;
margin: 15px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.box:hover {
animation-play-state: paused;
}

@keyframes move {
0% {
margin-left: 000px;
}
25% {
margin-left: 100px;
}
50% {
margin-left: 200px;
}
75% {
margin-left: 300px;
}
100% {
margin-left: 400px;
}
}

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

is the code I have tried:
may use JavaScript , Bootstrap, tailwind CSS.


Источник: https://stackoverflow.com/questions/781 ... -like-ring