Анимация keyframes. Scroll. Как сделать ускорение и остановку?

Question

[AlPaco]

https://codepen.io/pwauto939/pen/VwBvWMV
Я создал полосу прокрутки. Она состоит из двух блоков, один блок с помощью "position: absolute" уведен в сторону. "keyframes" сдвигает мои блоки по оси X создавая эффект прокрутки.
Но мне этого недостаточно. Мне нужно максимальное ускорение прокрутки первые 3 секунды, а потом плавное торможение и остановку на определенной точке моего "score-line" блока. Анимация должна срабатывать один раз и все.

Подскажите, пожалуйста, варианты. Как мне добиться желаемого?
С анимациями работаю недавно, два дня уже думаю над этим. Спасибо заранее!

Answer 1

[Сергей delphinpro]

Замените тайминг-функцию linear на ease – получите нечто похожее.
Для точного результата опишите собственную функцию https://developer.mozilla.org/ru/docs/Web/CSS/anim...

Comments

[AlPaco]

Без canvas реально решить проблему, да?

[Сергей delphinpro]

AlPaco, вообще не понял, причем здесь canvas. вы вроде про css анимации спрашиваете

[AlPaco]

Сергей delphinpro, Тогда если решите мою проблему с помощью CSS я оплачу эту работу. 500 рублей могу закинуть на карту. Можем связаться в tg @growsteel

[Сергей delphinpro]

AlPaco, так что ли? https://codepen.io/delphinpro/pen/jOpbLGZ?editors=1100