How to create a CSS slide loop that is smoth

Question

i need some help with a css slide loop, Its working but the slide is not smooth, there is a jittering and there is a jump at the end the loop. I kept changing the keyframe but i just cant find a way to make is smooth without jittering

So here's the code :

thats the container :

.container {
    max-width: 1140px;
    position: relative;
    width: 100%;
    margin: auto;
      text-align : center ; 
    overflow : hidden;
}

// here the column where the images slides 

 .col-lg-3  {
    animation: slide 15s linear infinite;
  margin: 20px 5px ;
}

@keyframes  slide {

    0% {transform: translate(0)}
 100% { transform: translateX(calc(-250px * 5))} 
    
}

Answer 1

Pretty sure that there must be a better solution. But you need to ask better question i think.

I still don't know what do you need, but check this maybe it will help.

I create a box full of images and give that box a margin-left (comes from justify content: end inside parent container(main-container)) and cover it with another box (cover-container) which have a position:absolute on it. and have a higher z-index than main-container and same background-color with main-container.

---

In animation i gave

 100% { 
    transform: translateX(-600%);
  } 

-600% because i have 5 images and when i give 5 width it acts like it is jumping as you said in your question but when giving 600% (5 + 1) it acts better like continious loop.

---

img{
  display: block;
  max-width: 100%;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}



body{
  min-height: 100vh;
  overflow: hidden;
  position: relative;
  margin:0;
  
}

.container {
  max-width: 1200px;
  display: grid;
  place-content: center;
  margin: 0 auto;
  background-color: bisque;
  height: 100vh;
}

.main-container{
  display: flex;
  overflow : hidden;
  justify-content: end;
}


.cover-container {
  position: absolute;
  display: grid;
  place-content: center;
  height: 400px;
  width: 900px;
  z-index: 999;
  margin-left: 300px;
  background-color: bisque;
  overflow: hidden;
}

.image-container{
  position: relative;
  display: flex;
  width: 75%;
  height: 400px;
}



img{
  animation: slide 7.5s linear infinite;
}


@keyframes  slide {

  0% {
    transform: translate(0);
  }
  100% { 
    transform: translateX(-600%);
  } 
}

 <div class="container">
      <div class="main-container">
        <div class="cover-container"></div>
        <div class="image-container">
          <img src="https://source.unsplash.com/random/300x400" alt="" />
          <img src="https://source.unsplash.com/random/300x400" alt="" />
          <img src="https://source.unsplash.com/random/300x400" alt="" />
          <img src="https://source.unsplash.com/random/300x400" alt="" />
          <img src="https://source.unsplash.com/random/300x400" alt="" />
        </div>
      </div>
</div>