HTML + CSS «запаздывает» при показе/загрузке изображения на веб-сайте ⇐ Html

[Anonymous]

Я делаю простой слайдер для своего веб-сайта (перевод CSS-анимации от 0 до -10000 пикселей).
Имейте такой HTML (это элементы div 1-20 и другой раз 1-20 для цикла):
//До этого я делал это с помощью JS (возникла та же проблема).
Почему вторая часть divs(1-20 | 1-20) с изображениями загружается после того, как приходит последнее изображение первой части на половину веб-сайта:/?
У меня есть такое же решение для слайдера в верхней части моего веб-сайта (5 изображений в формате FullHD, шестое такое же, как и первое для цикла), и оно отлично работает.

Код: Выделить всё

/*Here is my CSS:
images: 250x150 px each.*/

.main-container {
background-color: white;
width: 100%;
height: 600px;
display: flex;
flex-direction: column;
align-items: center;
padding: 100px;
overflow: hidden;

#truste-me-slider {
width: 10000px;
height: 300px;
overflow: hidden;
display: flex;
flex-direction: row;
flex-wrap: wrap;

overflow: hidden;
animation: 16s trusted-me-slider-animation infinite linear;
}

.trusted-item {
width: 250px;
height: 150px;
display: flex;
flex-direction: column;
float: left;
}

@keyframes trusted-me-slider-animation {
0% {
transform: translateX(0px);
}

100% {
transform: translate(-5000px);
}
}

Код: Выделить всё

Подробнее здесь: https://stackoverflow.com/questions/796 ... on-website