Плавные анимации в CSS с помощью cubic-bezier()

Когда вы задаёте анимацию или переход в CSS, свойства изменяются нелинейно: сначала медленно, потом быстрее, в конце снова замедляются. Это поведение называется интерполяцией и определяется так называемой функцией ускорения (или «easing function»). По умолчанию браузеры используют значения вроде ease, ease-in, ease-out и linear. Но если вам нужен более тонкий контроль над тем, как именно свойство изменяется во времени, пригодится функция cubic-bezier().

Эта функция позволяет задать собственную кривую ускорения с помощью четырёх чисел — координат двух управляющих точек кубической кривой Безье. Эти значения описывают, как «разгоняется» и «тормозит» анимация. cubic-bezier() поддерживается всеми современными браузерами и считается стабильной функцией (Baseline: Widely Available), так что её можно использовать в продакшене.

Вот пример, где переход на элементе происходит по заданной кривой:

.element {
  transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

В этом примере четыре числа — это координаты управляющих точек, задающих форму кривой. Именно они определяют, как быстро будет происходить переход: насколько он будет «вялым» в начале, насколько резко ускорится и как будет вести себя в конце.

Как это работает

Функция cubic-bezier(x₁, y₁, x₂, y₂) задаёт кубическую (то есть третьего порядка) кривую Безье, начинающуюся в точке (0, 0) и заканчивающуюся в (1, 1). Эти концевые точки фиксированы и соответствуют началу и концу анимации по времени и прогрессу. Вы можете менять только координаты двух контрольных точек — они определяют форму кривой.

Если контрольная точка ближе к (0, 0), движение будет медленным в начале. Если ближе к (1, 1) — анимация будет ускоряться к концу. Координаты x₁ и x₂ в контексте transitionдолжны находиться в диапазоне [0, 1]; в противном случае браузер проигнорирует функцию и применит ease по умолчанию. (В @keyframes допускается выход за эти пределы — для эффектов вроде отскока, но это отдельный случай.)

Значение cubic-bezier(0.25, 0.1, 0.25, 1) действительно соответствует стандартной функции ease. Но вы можете настроить свои параметры: сделать движение резким, упругим, медленным или имитирующим инерцию — всё зависит от комбинации точек.

Где это используется

Функция cubic-bezier() часто применяется в интерфейсах, где важна выразительность:

• при наведении на элементы: можно задать эффект лёгкого «залипания» или инерционного отклика;
• в анимации модалок и всплывающих окон: чтобы они появлялись и исчезали естественно;
• в карточках, галереях и других интерактивных блоках: для передачи ощущения инерции, упругости или плавного торможения.

Благодаря такой настройке интерфейс кажется более «живым» и отзывчивым. Особенно если вы делаете дизайн, ориентированный на движения (motion design).

Функция cubic-bezier() — мощный инструмент для тонкой настройки анимаций и переходов в CSS. Она позволяет выйти за рамки стандартных значений и создавать собственные стили движения, делая интерфейс плавным, динамичным и выразительным. Используйте визуальные редакторы кривых (например, cubic-bezier.com), чтобы экспериментировать с параметрами — и вы сможете добиться профессионального уровня анимации даже без JavaScript.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.