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

Для создания бесконечной анимации движения изображений нужно убедиться, что анимация плавно переходит от конца к началу. Для этого требуется сделать так, чтобы изображения внутри контейнера были дублированы и создавали эффект бесконечной прокрутки.

Исправленный код, который обеспечивает непрерывное движение изображений:

  
 
 
     
     
    Infinite Scrolling Animation