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

определение и использование

CSS cubic-bezier() функция используется для определения триждыBezier-кривой.

ТриждыBezier-кривая определена четырьмя точками P0, P1, P2 и P3. В CSS, P0 и P3 являются началом и концом кривой, и координаты этих точек являются фиксированными比率. P0 является (0, 0), что代表着 начальное время и начальное состояние; P3 является (1, 1), что代表着 конечное время и конечное состояние.

cubic-bezier() функции могут использоваться с animation-timing-function и transition-timing-function Свойства используются вместе.

Пример

Пример 1

Переходный эффект изменения скорости от начала до конца:

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
  transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}

Попробуйте сами

Пример 2

Показать элементы <div>, имеющие различные значения скорости триждыBezier:

#div1 {animation-timing-function: cubic-bezier(0,0,1,1);}
#div2 {animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {animation-timing-function: cubic-bezier(0.42,0,0.58,1);}

Попробуйте сами

Грамматика CSS

cubic-bezier(x1,y1,x2,y2)

Технические детали

Поддержка браузеров

Числа в таблице показывают версию первого браузера, который полностью поддерживает эту функцию.

Связанные страницы

См. также:Свойство animation-timing-function CSS

См. также:Свойство transition-timing-function в CSS