Html и css. Программирование. Изменение направления

Question

Html и css. Программирование. Изменение направления

Кирилл Ищейкин Ученик (182), на голосовании 4 месяца назад

Помогите пожалуйста, код работает исправно, но вторая фотография не дублируется при анимации, она должна продолжаться, как остальные фото

<body>
<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>
</body>

<style>
* {
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%);
}

}

</style>

Answer 1

Данил Ласый Просветленный (32806) 5 месяцев назад

код не запускал, но возможно в экран просто не влезает.... Такой беспредел.

⚠Оракул (50099) 5 месяцев назад

 вот   
создал  
автору вопроса  
  
всё теперь чётко

⚠ Оракул (50099)

⚠Оракул (50099) 5 месяцев назад

 видео подтверждение