Why in css3 animation, at a low playback speed in 90s, the image moves in jerks?

Question

css

Friends, I want to make the background move in one direction, then in the other direction, I decided to make animations on css3. But as it turned out, at a low playback speed in the 90s, the picture moves in jerks. How can this be avoided if possible? How to achieve smooth animation?

.mountains{
    animation: bg-movement 95s ease infinite;
}

@keyframes bg-movement {
    0%,
    100% {
        background-position: 0 0%
    }
    50% {
        background-position: 100% 0%
    }
}

I did it, look, but I have a wide screen, on a small one the speed is higher and jerks are not visible https://codepen.io/Cheizer/pen/Wypzrg/
How can I make the background move smoothly and slowly? Pamagitiiiiiii!!

Answer 1

Alternatively, try nesting your .mountains in a .wrapper and animating it with transform: translateX

Answer 2

most likely because he makes steps in 1%
put the value in px or vw