CSS Animation Constant Scroll

I don't know if what I have done is right or the best way but I have a simple PNG-8 file with clouds in it. It is 1200px wide and 700px height. The height is no issue I am applying a scroll to it so it looks like clouds are scrolling across the screen. I am getting the jump at the end of the animation when it jumps back to the first frame I am trying to remove this jump and just make the scroll constant.

My current solution is to have a ending keyframe that is 10000% position and a duration of 1000 seconds that's 16.6 minutes but it will then jump. Would people see this as a valid solution to the problem it's only for a 404 error screen so people aren't going to be on it for a long time.

Is there any other ways I could achieve this don't really want to use javascript.