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

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

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

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

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

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

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

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

Функция cubic-bezier(x1, y1, x2, y2) задаёт кривую Безье четвёртого порядка, начинающуюся в точке (0, 0) и заканчивающуюся в (1, 1). Эти точки зафиксированы, а вы можете менять только координаты двух промежуточных точек. Именно они определяют форму кривой.

Если точка ближе к (0, 0), движение будет медленным в начале. Если ближе к (1, 1) — анимация будет ускоряться к концу. Координаты x1 и x2 всегда должны быть между 0 и 1, иначе кривая выйдет за допустимые границы времени.

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

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

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

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

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

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

Больше обзоров веб-функций — в телеграм-канале HTML Academy.

Нашли ошибку или опечатку? Напишите нам.