Where does the scrolling of the whole image come from in the animation?

Question

css

Why does the whole image scroll after the animation ends?
More specifically, is it possible to get rid of it?
This is what frames look like

@-ms-keyframes randywalkright {
            0% { background-position: 0px 0px; }
            9.9% { background-position: 0px 0px; }
            10% { background-position: -2000px 0px; }
            19.9% { background-position: -2000px 0px; }
            20% { background-position: -4000px 0px; }
            29.9% { background-position: -4000px 0px; }
            30% { background-position: -6000px 0px; }
            39.9% { background-position: -6000px 0px; }
...
            70% { background-position: -6000px 0px; }
            79.9% { background-position: -6000px 0px; }
            80% { background-position: -4000px 0px; }
            89.9% { background-position: -4000px 0px; }
            90% { background-position: -2000px 0px; }
            99.9% { background-position: 0px 0px; }
            100% { background-position: 0px 0px; }
        }

Answer 1

If I understand the problem correctly, it animation-fill-mode: forwardswill help. This will freeze the animation at its end point.
To repeat the animation indefinitely, you need animation-iteration-count: infinite.
Both properties require prefixes . By the way, to not care about prefixes, try Autoprefixer .