Почему в css3 анимации при маленькой скорости проигрывания в 90s рисунок движется рывками?

Question

[Cheizer]

Друзья хочу сделать движение фона в одну, потом в другую сторону, решил сделать на css3 анимации. Но как оказалось при низкой скорости проигрывания в 90s рисунок двигается рывками. Как этого избежать если возможно? Как добиться плавности анимации?

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

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

Во сделал, посмотрите, но у меня широкий экран, на маленьком скорость выше и рывки не видно https://codepen.io/Cheizer/pen/Wypzrg/

Как можно сделать плавное и медленное движение фона? Памагитииииии!!

Comments

[Cheizer]

В общем, решение ЗДЕСЬ > https://stackoverflow.com/questions/21087518/anima...

Answer 1

[Егор Соколов]

Как вариант, попробуйте ваш .mountains вложить во .wrapper и анимировать его transform: translateX

Comments

[Cheizer]

Да да, нашел уже решение с translateX!

jsfiddle.net/5pVr4/6

[Егор Соколов]

Роман Кузнецов, в чём именно проблема? Там вроде CSS несложный.

[Cheizer]

Егор Соколов, спасибо, разобрался!

[DrBibelman]

Да, действительно, трансформ анимирует плавно.

Answer 2

[Alex]

скорее всего потому, что он делает степы в 1%
поставьте значение в px или vw

Comments

[Cheizer]

Спасибо, сделал вот так с vw, с px не знаю как сделать для фона. Так как ширина окна у всех разная.
Скорость при vw вместо % резко увеличилась, поднял ее с 90s до 290s, вроде плавнее движение чем при %, но все равно немного рывками идет анимация когда медленно совсем.

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