How to create a CSS slide loop that is smoth - css

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>