Как сделать горизонтальное движение картинок?

Question

[lekseykorolev]

Пытаюсь сделать движение картинок как на foundation.app, но не выходит. Есть набор скажем из 30 картинок, которые должны зациклено двигаться по горизонтали. Читал про animation-play-state: running; , но применить не вышло

<div class="d-flex">
   
<img src="https://vsegda-pomnim.com/uploads/posts/2022-04/1649119863_12-vsegda-pomnim-com-p-zastavka-priroda-foto-18.jpg" width="80" height="80" class="rounded-circle" style="animation-play-state: running;">
<img src="https://vsegda-pomnim.com/uploads/posts/2022-04/1649119863_12-vsegda-pomnim-com-p-zastavka-priroda-foto-18.jpg" width="80" height="80" class="rounded-circle" style="animation-play-state: running;">
<img src="https://vsegda-pomnim.com/uploads/posts/2022-04/1649119863_12-vsegda-pomnim-com-p-zastavka-priroda-foto-18.jpg" width="80" height="80" class="rounded-circle" style="animation-play-state: running;">
<img src="https://vsegda-pomnim.com/uploads/posts/2022-04/1649119863_12-vsegda-pomnim-com-p-zastavka-priroda-foto-18.jpg" width="80" height="80" class="rounded-circle" style="animation-play-state: running;">
<img src="https://vsegda-pomnim.com/uploads/posts/2022-04/1649119863_12-vsegda-pomnim-com-p-zastavka-priroda-foto-18.jpg" width="80" height="80" class="rounded-circle" style="animation-play-state: running;">
<img src="https://vsegda-pomnim.com/uploads/posts/2022-04/1649119863_12-vsegda-pomnim-com-p-zastavka-priroda-foto-18.jpg" width="80" height="80" class="rounded-circle" style="animation-play-state: running;">
<img src="https://vsegda-pomnim.com/uploads/posts/2022-04/1649119863_12-vsegda-pomnim-com-p-zastavka-priroda-foto-18.jpg" width="80" height="80" class="rounded-circle" style="animation-play-state: running;">
<img src="https://vsegda-pomnim.com/uploads/posts/2022-04/1649119863_12-vsegda-pomnim-com-p-zastavka-priroda-foto-18.jpg" width="80" height="80" class="rounded-circle" style="animation-play-state: running;">
<img src="https://vsegda-pomnim.com/uploads/posts/2022-04/1649119863_12-vsegda-pomnim-com-p-zastavka-priroda-foto-18.jpg" width="80" height="80" class="rounded-circle" style="animation-play-state: running;">
<img src="https://vsegda-pomnim.com/uploads/posts/2022-04/1649119863_12-vsegda-pomnim-com-p-zastavka-priroda-foto-18.jpg" width="80" height="80" class="rounded-circle" style="animation-play-state: running;">
<img src="https://vsegda-pomnim.com/uploads/posts/2022-04/1649119863_12-vsegda-pomnim-com-p-zastavka-priroda-foto-18.jpg" width="80" height="80" class="rounded-circle" style="animation-play-state: running;">



</div>

Подскажите как быть?

Comments

[Speakermen]

Посмотрите в youtube канал
Фрілансер по життю Все о CSS переходах (transitions) за 16 минут. CSS анимация
CSS transform. 2D и 3D трансформации translate, scale, rotate и другие
CSS animation и @keyframes за 12 минут.

draft код

.d-flex {
            animation-duration: 3s;
            animation-name: slidein;
            animation-iteration-count: infinite;
        }

        @keyframes slidein {
            from {
                margin-left: -30px;
                width: 300%;
            }

            to {
                margin-left: 100%;
                width: 100%;
            }
        }

[lekseykorolev]

Speakermen, спасибо, очень помог

Answer 1

[Sergei Nazarenko]

Ну там надо подбирать чтоб бесшовно было

Comments

[lekseykorolev]

Спасибо, пример очень помог разобраться