Как работают кривые плавности в CSS: математика Безье и правила анимации интерфейсов

В CSS-анимациях функции плавности подчиняются тем же законам, что и векторные контуры в Figma. Свойство cubic-bezier() опирается на математику Пьера Безье, но вместо изменения геометрической формы искривляет время. Разработчик Кармен Ансио собрал интерактивный разбор того, как координаты кривых меняют физику движения. Стандартные свойства вроде ease-out — это не магия, а жестко заданные координаты точек Безье на графике.

Ощущение отзывчивости интерфейса напрямую зависит от плотности кадров. Базовое правило сводится к трем сценариям. Для появления элементов на экране используют ease-out — объект влетает на высокой скорости и плавно замедляется. При скрытии компонента работает ease-in — он стартует мягко и резко уходит за пределы экрана. Для перемещения между видимыми точками применяется ease-in-out. Ошибка на этом этапе обходится дорого: использование ease-in для появления заставляет интерфейс казаться медленным, пока элемент едва сдвигается с места.

Стандартные ключевые слова удерживают кривую в координатах от 0 до 1. Выход за эти рамки открывает доступ к сложной физике без JavaScript. Если задать координату y больше единицы, получается эффект пружины с перелетом. Отрицательные значения создают эффект замаха перед стартом. Любая хореография интерфейса должна начинаться с обработки @media (prefers-reduced-motion: reduce) — эта системная настройка обязана сводить длительность анимации к нулю миллисекунд.