Специалисты, которые работают с анимацией, знают про
easeOutCubic, easeInOutExpo, easeOutBack и другие основные функции плавности.Те, кто копнул в принципы работы этих функцией знают, что они реализуют поведение, соответствующее различным кубическим кривым Безье.
Эта кривая строится на основе четырех точек:
P0 и P3 — начало и конец кривой;
P1 и P2 — указывают ее направление.
В CSS-реализации можно изменять только точки P1 и P2. Координаты P0 здесь всегда равны «0, 0», а P3 — «1, 1».
Кубические кривые Безье можно использовать в свойствах
transition-timing-function и animation-timing-function, чтобы настроить зависимость между временем и прогрессом выполнения анимации:transition-timing-function: cubic-bezier(x1, y1, x2, y2)