Функция CSS `cubic-bezier()`

cubic-bezier() CSS-функция создаёт плавный переход с использованием кубической кривой Безье. В качестве <easing-function> она может использоваться для сглаживания начала и конца интерполяции.

Синтаксис

cubic-bezier(0.25, 0.1, 0.25, 1)
cubic-bezier(0.1, -0.6, 0.2, 0)
cubic-bezier(0, 0, 1, 1)

Параметры

Функция принимает следующие четыре параметра, которые задают координаты двух контрольных точек:

<x1>

<number>, задающее координату первой контрольной точки по оси x. Значение должно находиться в диапазоне [0, 1].

<y1>

<number>, задающее координату первой контрольной точки по оси y.

<x2>

<number>, задающее координату второй контрольной точки по оси x. Значение должно находиться в диапазоне [0, 1].

<y2>

<number>, задающее координату второй контрольной точки по оси y.

Описание

Кубические функции Безье, часто называемые функциями плавного перехода, сопоставляют входной прогресс выходному. Оба значения выражаются в <number>ах, где 0.0 обозначает начальное состояние, а 1.0 — конечное. Если кубическая кривая Безье недопустима, CSS игнорирует всё свойство.

Кубическая кривая Безье задаётся четырьмя точками: P0, P1, P2 и P3. Точки P0 и P3 обозначают начало и конец кривой. В CSS начальная точка P0 фиксирована в (0, 0), а конечная точка P3 — в (1, 1); промежуточные точки P1 и P2 задаются соответственно параметрами функции (<x1>, <y1>) и (<x2>, <y2>). Ось x представляет входной прогресс, а ось y — выходной прогресс.

Не все кубические кривые Безье подходят в качестве функций плавного перехода, поскольку не все они являются математическими функциями, то есть кривыми, для которых каждой координате по оси x соответствует ноль или одно значение. При фиксированных, как определено в CSS, P0 и P3 кубическая кривая Безье является функцией и допустима, если координаты точек P1 и P2 по оси x обе находятся в диапазоне [0, 1].

Кубические кривые Безье, у которых ордината P1 или P2 находится за пределами диапазона [0, 1], могут привести к тому, что значение превысит конечное состояние, а затем вернётся к нему. В анимациях это создаёт эффект «отскока».

Однако некоторые свойства ограничивают выходное значение, если оно выходит за допустимый диапазон. Например, компонент цвета, превышающий 255 или меньший 0 в rgb(), будет ограничен ближайшим допустимым значением (соответственно 255 и 0). Некоторые значения cubic-bezier() ведут себя таким же образом.

Формальный синтаксис

<cubic-bezier()> = 
  cubic-bezier( [ <number [0,1]>, <number> ]#{2} )

Примеры

Эффект отскока

В этом примере красный шарик выскакивает из рамки при переходе из исходного положения. Это происходит потому, что одно из значений P2, 2.3, выходит за пределы диапазона [0, 1].

<div tabindex="0">
  <span></span>
</div>

div {
  margin: 8px auto;
  padding: 8px;
  width: 256px;
  border-radius: 40px;
  background-color: wheat;
}

span {
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: tomato;
}

div:hover span,
div:focus span {
  translate: 192px 0;
}

span {
  transition: translate 0.3s cubic-bezier(0.3, 0.8, 0.3, 2.3);
}

Использование функции cubic-bezier()

Эти кубические кривые Безье допустимы для использования в CSS:

/* The canonical Bézier curve with four <number> in the [0,1] range */
cubic-bezier(0.1, 0.7, 1.0, 0.1)

/* Using <integer> is valid because any <integer> is also a <number> */
cubic-bezier(0, 0, 1, 1)

/* Negative values for ordinates are valid, leading to bouncing effects */
cubic-bezier(0.1, -0.6, 0.2, 0)

/* Values greater than 1.0 for ordinates are also valid */
cubic-bezier(0, 1.1, 0.8, 4)

Эти определения кубических кривых Безье недопустимы:

/* Parameters must be numbers */
cubic-bezier(0.1, red, 1.0, green)

/* X coordinates must be in the [0, 1] range */
cubic-bezier(2.45, 0.6, 4, 0.1)

/* There must be exactly four parameters */
cubic-bezier(0.3, 2.1)

/* X coordinates must be in the [0, 1] range */
cubic-bezier(-1.9, 0.3, -0.2, 2.1)

Спецификации

Совместимость с браузерами

См. также

• Другие функции плавного перехода: linear() и steps()
• Модуль функций плавного перехода CSS
• cubic-bezier.com — проект Леа Веру