CSS image scroll animation jarringly resets

Hi great people of the Webflow forums,

I have this scroll animation on several pages of a restaurant location site I built:

It’s basically a big .jpg that is scrolling with some extra css code in the custom css field for each page.

It works fine, but resets after about 50 seconds or so - which looks kind of jarring when it suddenly jumps back into its starting position.

How can I make it scroll in a smooth, endless loop to avoid this?

Best regards,
John P. Koskimaa

Site: https://www.bedreamers.jp/brands/farmers

Here is my site Read-Only: https://preview.webflow.com/preview/be-dreamers?preview=4b1a1a8254d4d80b9ddd83416fd5e5e4