Бегущая строка HTML и CSS

Question

есть три бегущие строки с картинками, 1 и 3 выполняют свою работу идеально, а во 2 строке почему-то только одно изображение, нужно, чтобы во 2 строке было, как в 1 и3 (шли фотки подряд). Сижу уже 4 час и не получается сделать, помогите пожалуйста

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #f2f2f2;
}

.logos-left {
  overflow: hidden;
  padding: 5px 0;
  background: #f2f1ed;
  white-space: nowrap;
  position: relative;
}

.logos-right {
  overflow: hidden;
  padding: 5px 0;
  background: #f2f1ed;
  white-space: nowrap;
  position: relative;
}

.logos-left:after {
  position: absolute;
  top: 0;
  width: 250px;
  height: 100%;
  content: "";
  z-index: 2;
}

.logos-right:after {
  position: absolute;
  top: 0;
  width: 250px;
  height: 100%;
  content: "";
  z-index: 2;
}

.logos-slide-left {
  display: inline-block;
  animation: slide-left 15s infinite linear;
}

@keyframes slide-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

.logos-slide-right {
  display: inline-block;
  animation: slide-right 15s infinite linear;
}

@keyframes slide-right {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

<div class="logos-left">
  <div class="logos-slide-left">
    <img src="https://i.postimg.cc/y8k1tD48/Slice-28.jpg" />
  </div>
  <div class="logos-slide-left">
    <img src="https://i.postimg.cc/y8k1tD48/Slice-28.jpg" />
  </div>
  <div class="logos-right">
    <div class="logos-slide-right">
      <img src="https://i.postimg.cc/rsqTymD3/Slice-29.jpg" />
    </div>
    <div class="logos-slide-right">
      <img src="https://i.postimg.cc/rsqTymD3/Slice-29.jpg" />
    </div>
    <div class="logos-left">
      <div class="logos-slide-left">
        <img src="https://i.postimg.cc/BZCsYxy0/Slice-30.jpg" />
      </div>
      <div class="logos-slide-left">
        <img src="https://i.postimg.cc/BZCsYxy0/Slice-30.jpg" />
      </div>
    </div>
  </div>

Answer 1

Измените начальное и конечное положение в трансформации

@keyframes slide-right {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

У вас "второй слайд" был уже за пределами

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #f2f2f2;
}

.logos-left {
  overflow: hidden;
  padding: 5px 0;
  background: #f2f1ed;
  white-space: nowrap;
  position: relative;
}

.logos-right {
  overflow: hidden;
  padding: 5px 0;
  background: #f2f1ed;
  white-space: nowrap;
  position: relative;
}

.logos-left:after {
  position: absolute;
  top: 0;
  width: 250px;
  height: 100%;
  content: "";
  z-index: 2;
}

.logos-right:after {
  position: absolute;
  top: 0;
  width: 250px;
  height: 100%;
  content: "";
  z-index: 2;
}

.logos-slide-left {
  display: inline-block;
  animation: slide-left 15s infinite linear;
}

@keyframes slide-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

.logos-slide-right {
  display: inline-block;
  animation: slide-right 15s infinite linear;
}

@keyframes slide-right {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

<div class="logos-left">
  <div class="logos-slide-left">
    <img src="https://i.postimg.cc/y8k1tD48/Slice-28.jpg" />
  </div>
  <div class="logos-slide-left">
    <img src="https://i.postimg.cc/y8k1tD48/Slice-28.jpg" />
  </div>
</div>
<div class="logos-right">
  <div class="logos-slide-right">
    <img src="https://i.postimg.cc/rsqTymD3/Slice-29.jpg" />
  </div>
  <div class="logos-slide-right">
    <img src="https://i.postimg.cc/rsqTymD3/Slice-29.jpg" />
  </div>
</div>
<div class="logos-left">
  <div class="logos-slide-left">
    <img src="https://i.postimg.cc/BZCsYxy0/Slice-30.jpg" />
  </div>
  <div class="logos-slide-left">
    <img src="https://i.postimg.cc/BZCsYxy0/Slice-30.jpg" />
  </div>
</div>

БЛОГ НА HUSL

Бегущая строка HTML и CSS

Ответы (1 шт):