Stop animation from snapping back when it finishes

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));
    }

  }