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:

									

										
											
												
													[
														
![attachment](./static/freddy_poster.jpg)

													](#)
													
														
															
															
																
																	[7.4/10](https://www.imdb.com/title/tt15145764/)
																	
																
																
															
															
					
															
																[
																	
																](https://www.youtube.com/watch?v=lI3YcNpngCU)
															
														
														
													
												
											
										

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?