Руководство по CSS

CSS @ правила (RULES)

Полный список свойств CSS

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

Онлайн пример

Эффект перехода с различной скоростью от начала до конца:

Пример

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Основной курс (oldtoolbag.com)</title>
<style>　
div {
　　width: 100px;
　　height: 100px;
　　background: red;
　　transition: width 2s;
　　transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}
div:hover {
　　width:300px;
}
</style>
</head>
<body>
<h1>Функция cubic-bezier()</h1>
<p>Переместите мышь на элемент div, чтобы увидеть эффект.</p>
<div></div>
<p><b>Внимание:</b> браузеры Internet Explorer 9 и более ранние версии не поддерживают этот эффект.</p>
</body>
</html>

Проверьте, чтобы посмотреть <

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

Функция cubic-bezier() определяет кривую Безье (Cubic Bezier).

Кривая Безье определена четырьмя точками P0, P1, P2 и P3. P0 и P3 - это начало и конец кривой. P0 - это (0,0) и означает начальное время и начальное состояние, P3 - это (1,1) и означает конечное время и конечное состояние.

Из上图 мы должны знать, что диапазон значений cubic-bezier:

P0: Значение по умолчанию (0, 0)
P1: Динамическое значение (x1, y1)
P2: Динамическое значение (x2, y2)
P3: Значение по умолчанию (1, 1)

Мы должны обращать внимание на значения точек P1 и P2, при этом диапазон значений по оси X составляет от 0 до 1, когда значения выходят за пределы диапазона, cubic-bezier становится неэффективным; значения по оси Y не указаны, естественно, они не должны быть слишком большими.

Наиболее прямое понимание - это放置 прямой на оси координат с диапазоном только 1 и вытащить два точки для тянуть (диапазон значений по оси X составляет [0, 1], ось Y любая), в конечном итоге полученная кривая будет кривой скорости анимации.

cubic-bezier() может быть использован animation-timing-function 　и transition-timing-function Свойство.

Поддерживаемая версия: CSS3

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

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

Функция
cubic-bezier()	4.0	10.0	4.0	3.1	10.5

CSS грамматика

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

Значение	Описание
x1,y1,x2,y2	Обязателен. Числовое значение, x1 и x2 должны быть числами в диапазоне от 0 до 1.

CSS функция

Правило @charset CSS Функции CSS