Генератор cubic-bezier

Как пользоваться

1. Выберите пресет (ease, ease-out, easeOutBack и др.) или начните со стандартной кривой.
2. Перетащите красную и фиолетовую точки на графике или введите x1, y1, x2, y2 в полях. С клавиатуры: выделите точку и двигайте стрелками (Shift — мелкий шаг).
3. Задайте длительность и эталонную кривую (linear, ease…) и нажмите «Запустить»: синий блок едет по вашей кривой, серый — по эталонной.
4. Нажмите «Копировать» и вставьте transition в свой CSS.

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

Что означает cubic-bezier()

cubic-bezier(x1, y1, x2, y2) описывает кривую Безье, которая начинается в точке (0, 0) и заканчивается в (1, 1). По горизонтали откладывается время, по вертикали — доля выполненного изменения. Четыре числа — координаты двух контрольных точек: P1 «тянет» кривую в начале, P2 — в конце. Чем круче кривая, тем быстрее движение в этот момент.

transition: transform 600ms cubic-bezier(0.25, 0.1, 0.25, 1);

Ключевые слова — это готовые кривые

Каждое ключевое слово — сокращение для фиксированного cubic-bezier(): ease — cubic-bezier(0.25, 0.1, 0.25, 1), ease-in — (0.42, 0, 1, 1), ease-out — (0, 0, 0.58, 1), ease-in-out — (0.42, 0, 0.58, 1), linear — (0, 0, 1, 1). При этом ease — значение по умолчанию для transition-timing-function и animation-timing-function.

transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1); /* = ease-in-out */

Перелёт: y за пределами 0..1

Значения x должны оставаться в диапазоне 0..1, а y может выходить за него. Тогда свойство «перелетает» цель и возвращается — получается эффект back, например cubic-bezier(0.34, 1.56, 0.64, 1). Он хорош для transform и масштаба, но бесполезен для свойств, которые не выходят за свой диапазон, например opacity.

transition: transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

Где применять кривую

Задавайте кривую в transition или animation для всей анимации либо внутри @keyframes — отдельно для каждого отрезка. Для плавных 60 кадров в секунду анимируйте transform и opacity. Несколько отскоков одной кривой cubic-bezier не сделать — для этого используйте keyframes или функцию linear().

Частые вопросы