I have this animation that I created. it’s an infinite carousel.
My main issue is that when the animation finishes, it snaps back and continues the animation.
How can I prevent it from snapping back but still continue the animation infinitely? I want it to continue the animation infinitely without looking like it snapped back. If I’m not making sense please look at https://replit.com/ homepage and there infinite carousel.
Can this be done with pure CSS or do I need JavaScript? If so how would I implement it?
Here’s my code
<div class="slider">
<div class="slider-track">
<div className="slide"></div>
<div className="slide"></div>
<div className="slide"></div>
<div className="slide"></div>
<div className="slide"></div>
<div className="slide"></div>
<div className="slide"></div>
<div className="slide"></div>
</div>
</div>
CSS
.slider {
margin: 0 auto;
overflow: hidden;
}
.slider-track {
display: flex;
width: fit-content;
animation: carousel 10s linear infinite;
}
.slider-track:hover {
animation-play-state: paused
}
.slide {
display: block;
width: 400px;
height: 200px;
background-color: blue;
margin: 20px;
}
@keyframes carousel {
100% {
transform: translateX(calc(-250px*1));
}
}