Ticker animation not including all elements in ticker

I have configured a custom ticker, in which I have used the correct structure and class for it, but I have a problem where the ticker animation will reset before it goes through all the elements in the ticker.

Here is a snippet of my HTML:

<div class="movie-ticker-wrap pause-on-hover">
									<div class="movie-ticker">

										<div class="movie-ticker-item">
											<div class="grid-inner">
												<div class="portfolio-image">
													<a href="#">
														<img src="./static/freddy_poster.jpg" style="height: 30vw;">
													</a>
													<div class="bg-overlay">
														<div class="bg-overlay-content dark flex-column col-12">
															<!--  -->
															<div class="position-absolute bottom-0 p-5">
																<div class="row row-cols-2 justify-content-center">
																	<a href="https://www.imdb.com/title/tt15145764/" target="_blank" class="button button-rounded button-reveal button-amber w-100"><i class="fa-solid fa-star"></i><span class="customratingtext">7.4/10</span></a>
																	
																</div>
																
															</div>
															
					
															<div class="d-flex justify-content-center">
																<a href="https://www.youtube.com/watch?v=lI3YcNpngCU" class="overlay-trigger-icon bg-warning size-lg scale-lg text-dark align-items-center" data-hover-animate="fadeInUpSmall" data-hover-animate-out="fadeOutDownSmall" data-hover-speed="350" data-lightbox="iframe">
																	<i class="uil uil-play"></i>
																</a>
															</div>
														</div>
														<div class="bg-overlay-bg dark" data-hover-animate="fadeIn"></div>
													</div>
												</div>
											</div>
										</div>
</div
</div>

Here is my CSS:

@-webkit-keyframes ticker {
	0% {
	  -webkit-transform: translate3d(0, 0, 0);
	  transform: translate3d(0, 0, 0);
	  visibility: visible;
	}

	100% {
	  -webkit-transform: translate3d(-100%, 0, 0);
	  transform: translate3d(-100%, 0, 0);
	}
  }

  @keyframes ticker {
	0% {
	  -webkit-transform: translate3d(0, 0, 0);
	  transform: translate3d(0, 0, 0);
	  visibility: visible;
	}

	100% {
	  -webkit-transform: translate3d(-100%, 0, 0);
	  transform: translate3d(-100%, 0, 0);
	}
  }

  .movie-ticker-wrap {
	--movie-ticker-duration: 60s;

	  width: 100%;
	  overflow: hidden;
	  padding-left: 100%;
	  box-sizing: content-box;
  }

  .movie-ticker-wrap .movie-ticker {
		display: inline-block;
		white-space: nowrap;
		padding-right: 100%;
		box-sizing: content-box;
		-webkit-animation: ticker var(--movie-ticker-duration) linear infinite;
		animation: ticker var(--movie-ticker-duration) linear infinite;
  }

  .movie-ticker-wrap .movie-ticker-item {
	display: inline-block;
	padding: 0 2rem;
	font-size: 1.5rem;

}

.movie-ticker-wrap.pause-on-hover .movie-ticker:hover {
	animation-play-state: paused;
}

a.movie-ticker-item:hover {
	text-decoration: underline !important;
}

In the live website, look in the "Completed Projects" section to see what I am talking about.

Here is the Live URL: https://test.d2k8m0w9ekee5y.amplifyapp.com/

Could you also elaborate on what "Length of the Ticker Items is double of the actual width of the Ticker in the Viewport" means?