I am facing an issue with my HTML & CSS automatic horizontal slideshow. Everything works fine, except for when the last image finishes sliding and the slideshow loops back to the first image, there is a sudden jump in the appearance of the first image. How can I make this transition smoother? Is there a way to achieve this without using JavaScript?
.slider-container {
width: 100%;
height: 446px;
position: relative;
text-align: center;
overflow: hidden;
}
.image-container {
width: 3240px;
height: 446px;
clear: both;
position: relative;
animation-name: slider;
animation-duration: 30s;
animation-delay: 10s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: backwards;
animation-play-state: running;
}
.slider-image {
width: auto;
height: 446px;
float: left;
position: relative;
}
@keyframes slider {
0% {
transform: translate(0, 0);
}
50% {
transform: translate(-1080px, 0);
}
100% {
transform: translate(-2160px, 0);
}
}<section class="row top slider-container">
<div class="image-container">
<img class="slider-image" src="https://dummyimage.com/1080x446/000/fff.png&text=Image+1" alt="">
<img class="slider-image" src="https://dummyimage.com/1080x446/333333/fff.png&text=Image+2" alt="">
<img class="slider-image" src="https://dummyimage.com/1080x446/666666/fff.png&text=Image+3" alt="">
</div>
</section>