Функция cubic-bezier()
Эффект перехода с переменной скоростью от начала до конца:
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}
Попробуйте сами »
Определение cubic-bezier()
Функция cubic-bezier()
определяет кубическую кривую Безье.
Кубическая кривая Безье определяется четырьмя точками P0, P1, P2 и P3. P0 и P3 — это начало и конец кривой, и в CSS эти точки фиксированы, поскольку координаты являются отношениями. P0 равен (0, 0) и представляет начальное время и начальное состояние, P3 равен (1, 1) и представляет конечное время и конечное состояние.
Функция cubic-bezier()
может использоваться со свойствами animation-timing-function и transition-timing-function.
Версия: | CSS3 |
---|
Поддержка браузера cubic-bezier()
Цифры в таблице указывают первую версию браузера, полностью поддерживающую данную функцию.
Функция | |||||
---|---|---|---|---|---|
cubic-bezier() | 4.0 | 10.0 | 4.0 | 3.1 | 10.5 |
CSS Синтаксис cubic-bezier()
cubic-bezier(x1,y1,x2,y2)
Значение | Описание |
---|---|
x1,y1,x2,y2 | Необходимый. Числовые значения. x1 и x2 должны быть числами от 0 до 1. |