Как в css сделать непрерывное движение картинок, чтобы в первом ряду картинки двигались справа налево, а во втором - слева направо?

Рейтинг: 0Ответов: 1Опубликовано: 17.03.2023

Задача: Нужно в css сделать непрерывное движение картинок. В первом ряду картинки движутся справа налево, а во втором ряду картинки движутся слева направо, и в третьем ряду картинки движутся справа налево.

Только нужно это сделать так, чтобы картинки двигались беспрерывно, и чтобы не было никаких отступов после последней картинки. То есть чтобы после последней картинки сразу же появлялась первая картинка. Подскажите пожалуйста, как это реализовать?

введите сюда описание изображения

css
Источник: Stack Overflow на русском

Ответы

▲ 3

Ну, раз метка только CSS, то можно и так. Но, нужно учесть, что придётся дублировать набор изображений в самой разметке:

.wrapper {
  position: relative;
  width: 550px; height: 550px;
  overflow: hidden;
  background-image: linear-gradient( #590196 4em, #59019688, #590196 calc(100% - 4em));
}

.running_img {
  position: absolute;
  left: 50%; top: 50%; z-index: -1;
  display: flex; flex-flow: column nowrap;
  width: 600px; height: 450px;
  overflow: hidden;
  transform: translate(-50%, -50%) rotate(-5deg);
}

.row {
  display: flex; flex-flow: row nowrap;
  width: min-content;
}
.row:nth-of-type(1) { animation: slide 5s linear infinite; }
.row:nth-of-type(2) { animation: slide 15s linear infinite reverse; }
.row:nth-of-type(3) { animation: slide 9s linear infinite; }

.row > img {
  width: 200px;  height: 150px;
  object-fit: cover;
}

@keyframes slide { to { transform: translatex(-50%); } }
<div class="wrapper">
  <div class="running_img">
    <div class="row">
      <img src="https://i.sstatic.net/MraLT.jpg" alt="red wall">
      <img src="https://i.sstatic.net/VxVNC.jpg" alt="yellow flower">
      <img src="https://i.sstatic.net/A9VLC.jpg" alt="green forest">
      <img src="https://i.sstatic.net/oYG0R.jpg" alt="blue rose">
      
      <img src="https://i.sstatic.net/MraLT.jpg" alt="red wall">
      <img src="https://i.sstatic.net/VxVNC.jpg" alt="yellow flower">
      <img src="https://i.sstatic.net/A9VLC.jpg" alt="green forest">
      <img src="https://i.sstatic.net/oYG0R.jpg" alt="blue rose">
    </div>
    <div class="row">
      <img src="https://i.sstatic.net/MraLT.jpg" alt="red wall">
      <img src="https://i.sstatic.net/VxVNC.jpg" alt="yellow flower">
      <img src="https://i.sstatic.net/A9VLC.jpg" alt="green forest">
      <img src="https://i.sstatic.net/oYG0R.jpg" alt="blue rose">
      
      <img src="https://i.sstatic.net/MraLT.jpg" alt="red wall">
      <img src="https://i.sstatic.net/VxVNC.jpg" alt="yellow flower">
      <img src="https://i.sstatic.net/A9VLC.jpg" alt="green forest">
      <img src="https://i.sstatic.net/oYG0R.jpg" alt="blue rose">
    </div>
    <div class="row">
      <img src="https://i.sstatic.net/MraLT.jpg" alt="red wall">
      <img src="https://i.sstatic.net/VxVNC.jpg" alt="yellow flower">
      <img src="https://i.sstatic.net/A9VLC.jpg" alt="green forest">
      <img src="https://i.sstatic.net/oYG0R.jpg" alt="blue rose">
      
      <img src="https://i.sstatic.net/MraLT.jpg" alt="red wall">
      <img src="https://i.sstatic.net/VxVNC.jpg" alt="yellow flower">
      <img src="https://i.sstatic.net/A9VLC.jpg" alt="green forest">
      <img src="https://i.sstatic.net/oYG0R.jpg" alt="blue rose">
    </div>
  </div>
</div>