The problem in your code is that the imagesize (610px) and the animation's offset (500px) differ and at the reset of the animation it hops (110px).

A simple trick I like to use instead of defining the animation offset in pixel: Define it in percentages.

Instead of telling it to move 610px, I tell it to move 100%.

The bonus of the 100% method is that if you cange the picture, you dont have to alter all hardcoded values in your CSS, which, IMO, should be the prefered method.

Please note: It seems like moving from 0 to -100% creates a hop. Because we need the rotation to go in the right direction, I tried starting 100% and move it to 0, but at this point the image no longer exists.

@keyframes rotate { from { background-position: 100% 0; } to { background-position: 0 0; } }

Here is the snippet, but with 100% instead of a pixelvalue:

* Please note: The animation still hopped, but I can't test new code because the image no longer exists. The logic works, but this implementation seems not to. The following code is only a demo with the TS's code.