Glitch in Marquee Animation

Design help Animations & Interactions
1

Hello everyone.
I am facing a glitch in the marquee i create on webflow. However, the animation is simple css custom code as below;

@keyframes scrolle { from { transform: translateX(0); } to { transform: translateX(calc(-100% - 2.5rem)); } } .scrolle { animation: scrolle 18s linear infinite; }

The glitch is that when the marquee is moving alright but at certain time it malfunctions a bit like stops suddenly and restarts again. Whereas; I intended it to move in an infinite loop without any stoppage.

Here’s the published link as follow;