I am having trouble with my custom liquid code

Store Design
,
1

When it reaches the end the code keeps restarting i would like it to be constant.

https://infinictus.com/

.carousel-container { overflow: hidden; background-color: #fff; width: 100%; }

.carousel {
display: flex;
white-space: nowrap;
animation: scroll 20s linear infinite;
}

.carousel-item {
flex: 0 0 auto;
padding: 10px 20px;
color: green;
font-family: “Black Ops One”, system-ui;
}

.carousel-item p {
margin: 0;
}

@keyframes scroll {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-100%);
}
}

Free worldwide shipping on orders over $49.99! Don't miss out!

Free worldwide shipping on orders over $49.99! Don't miss out!

Free worldwide shipping on orders over $49.99! Don't miss out!

Free worldwide shipping on orders over $49.99! Don't miss out!

Free worldwide shipping on orders over $49.99! Don't miss out!

Free worldwide shipping on orders over $49.99! Don't miss out!

Free worldwide shipping on orders over $49.99! Don't miss out!

Free worldwide shipping on orders over $49.99! Don't miss out!

Free worldwide shipping on orders over $49.99! Don't miss out!

Free worldwide shipping on orders over $49.99! Don't miss out!

2

Hi!

Extend the duration of the animation to ‘20s’ as specified. There must be a mandatory end point for the animation. Also, increase the number of elements inside the ‘carousel-item’. Let me know if you can’t do it.

animation: scroll 20s linear infinite;

Terence..