В этой статье
Что такое кубические кривые Безье?
Кубическая кривая Безье — это математическая функция, используемая в CSS для определения тайминга анимаций и переходов. Записанная как cubic-bezier(x1, y1, x2, y2), она описывает, как анимация продвигается от начала до конца, отображая время на прогресс вдоль плавной кривой, определённой четырьмя контрольными точками.
В CSS функция cubic-bezier() управляет easing свойств transition-timing-function и animation-timing-function. Вместо линейного движения она позволяет создавать естественные ускорения и замедления, имитирующие физику реального мира, делая анимации интерфейса отточенными и целенаправленными.
Понимание четырёх контрольных значений
Функция cubic-bezier() принимает четыре значения, определяющие две контрольные точки на кривой. Эти контрольные точки формируют то, как анимация ускоряется и замедляется.
- X1 (0-1) — горизонтальная позиция первой контрольной точки, определяющая, когда заканчивается фаза начального ускорения
- Y1 (любое значение) — вертикальная позиция первой контрольной точки, контролирующая скорость начала анимации. Значения больше 1 создают эффект превышения
- X2 (0-1) — горизонтальная позиция второй контрольной точки, определяющая, когда начинается фаза замедления
- Y2 (любое значение) — вертикальная позиция второй контрольной точки, контролирующая завершение анимации. Значения больше 1 создают эффект отскока
Попробуйте бесплатно — без регистрации
Создать кривую Безье →Распространённые пресеты easing и когда их использовать
CSS предоставляет несколько встроенных ключевых слов easing, соответствующих конкретным значениям cubic-bezier. Понимание этих пресетов помогает выбрать правильное ощущение для ваших анимаций.
- ease (0.25, 0.1, 0.25, 1.0) — стандарт CSS, начинается быстро, затем плавно замедляется. Подходит для большинства общих переходов
- ease-in (0.42, 0, 1.0, 1.0) — начинается медленно и ускоряется. Лучше всего для элементов, покидающих экран или исчезающих
- ease-out (0, 0, 0.58, 1.0) — начинается быстро и замедляется. Идеально для элементов, появляющихся на экране
- ease-in-out (0.42, 0, 0.58, 1.0) — медленное начало и конец с быстрой серединой. Подходит для циклических анимаций или элементов, остающихся на экране
- linear (0, 0, 1, 1) — постоянная скорость от начала до конца. Используйте для индикаторов прогресса, спиннеров загрузки или цветовых переходов
Часто задаваемые вопросы
Поддерживают ли cubic-bezier() все браузеры?
Да. Функция cubic-bezier() поддерживается всеми основными браузерами с IE 10 (2012). Она является частью спецификаций CSS Transitions и CSS Animations, которые полностью поддерживаются в Chrome, Firefox, Safari, Edge и всех современных мобильных браузерах.
Можно ли создать пружинные или отскоковые анимации с cubic-bezier()?
Кубические кривые Безье могут аппроксимировать простые эффекты отскока, используя значения Y больше 1 (превышение). Например, cubic-bezier(0.34, 1.56, 0.64, 1) создаёт лёгкое превышение. Однако настоящая физика пружины с множественными отскоками требует CSS spring() (пока не поддерживается широко) или JavaScript-библиотек анимации, таких как GSAP или Framer Motion.
В чём разница между CSS-переходами и CSS-анимациями?
CSS-переходы анимируют между двумя состояниями при изменении свойства (например, при наведении). CSS-анимации используют ключевые кадры для определения многошаговых последовательностей, которые могут зацикливаться и выполняться независимо. Оба используют одни и те же функции тайминга, включая cubic-bezier(), для управления easing между состояниями или ключевыми кадрами.