HTML + CSS "lag" in image showing / loading on website

I'm making simple slider for my website (css animation translate 0 to -10000px). Have HTML like this (those are divs 1-20 and another time 1-20 for loop that): //Before that I was making it by JS (same problem occured). Why second part of divs(1-20 | 1-20) with images is loading after last image of first part comes to a half part of the website :/?

Got the same solution for slider on top of my website (5 fullHD images, 6th is the same as firs for loop) and it works great.

<div class="main-container">
    <div id="truste-me-slider">
        <div class="trusted-item" id="trusted-01" ></div><div class="trusted-item" id="trusted-02" ></div><div class="trusted-item" id="trusted-03" ></div><div class="trusted-item" id="trusted-04" ></div><div class="trusted-item" id="trusted-05" ></div><div class="trusted-item" id="trusted-06" ></div><div class="trusted-item" id="trusted-07" ></div><div class="trusted-item" id="trusted-08" ></div><div class="trusted-item" id="trusted-09" ></div><div class="trusted-item" id="trusted-10" ></div><div class="trusted-item" id="trusted-11" ></div><div class="trusted-item" id="trusted-12" ></div><div class="trusted-item" id="trusted-13" ></div><div class="trusted-item" id="trusted-14" ></div><div class="trusted-item" id="trusted-15" ></div><div class="trusted-item" id="trusted-16" ></div><div class="trusted-item" id="trusted-17" ></div><div class="trusted-item" id="trusted-18" ></div><div class="trusted-item" id="trusted-19" ></div><div class="trusted-item" id="trusted-20" ></div><div class="trusted-item" id="trusted-01" ></div><div class="trusted-item" id="trusted-02" ></div><div class="trusted-item" id="trusted-03" ></div><div class="trusted-item" id="trusted-04" ></div><div class="trusted-item" id="trusted-05" ></div><div class="trusted-item" id="trusted-06" ></div><div class="trusted-item" id="trusted-07" ></div><div class="trusted-item" id="trusted-08" ></div><div class="trusted-item" id="trusted-09" ></div><div class="trusted-item" id="trusted-10" ></div><div class="trusted-item" id="trusted-11" ></div><div class="trusted-item" id="trusted-12" ></div><div class="trusted-item" id="trusted-13" ></div><div class="trusted-item" id="trusted-14" ></div><div class="trusted-item" id="trusted-15" ></div><div class="trusted-item" id="trusted-16" ></div><div class="trusted-item" id="trusted-17" ></div><div class="trusted-item" id="trusted-18" ></div><div class="trusted-item" id="trusted-19" ></div><div class="trusted-item" id="trusted-20" ></div>
    </div>
</div>

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);
      }
    }