title: How I can make a div that move on the X axis in a infinite loop?
body: <p>I want to know how I can make this possible. I want to make an infinite loop slider. But I can't get it to appear on the other side as soon as it starts to cross the right. Any idea, please? Here is how looks now<a href="https://i.stack.imgur.com/ljR07.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ljR07.png" alt="enter image description here" /></a></p>
  <p>And this is my code:</p>
  <pre><code>&lt;div className='home-container'&gt;
          &lt;div className='slider-top'&gt;
              &lt;img className='top-28866' src={Home28866} 
   alt=&quot;Home28866Top1&quot; /&gt;
              &lt;img className='top-28866' src={Home28866} 
   alt=&quot;Home28866Top2&quot; /&gt;
              &lt;img className='top-28866' src={Home28866} 
   alt=&quot;Home28866Top3&quot; /&gt;
              &lt;img className='top-28866' src={Home28866} 
   alt=&quot;Home28866Top4&quot; /&gt;
              &lt;img className='top-28866' src={Home28866} 
   alt=&quot;Home28866Top5&quot; /&gt;
              &lt;img className='top-28866' src={Home28866} 
   alt=&quot;Home28866Top6&quot; /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      .slider-top {
  display: flex;
  justify-content: space-between;
  animation: marquee-mobile 20s infinite cubic-bezier(0.53, 0.47, 1, 1);
  width: 100%;
  height: 5vw;
  padding-top: 3vw;
  overflow: hidden;
  -webkit-box-pack: start;
  
  }
  
   @keyframes marquee-mobile {
   0%  {
      -webkit-transform: translateX(0);
      transform: translateX(0);
   }
  
   100% {
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%);
   }
   }
  </code></pre>