Генератор CSS Cubic-Bezier

Что это за инструмент?

cubic-bezier() — это функция времени CSS, которая определяет, как анимируемое или переходящее значение ускоряется и замедляется во времени, вместо равномерного движения. Она задаётся двумя контрольными точками — (x1, y1) и (x2, y2) — которые изгибают линию между фиксированной начальной точкой (0,0) и фиксированной конечной точкой (1,1). Значения x должны оставаться в диапазоне от 0 до 1, а значения y могут выходить за эти пределы, создавая эффекты перелёта или отскока.

Подбирать вручную четыре десятичных числа, чтобы получить ощущение, которое не будет ни резким, ни вялым, требует множества проб и ошибок. Этот инструмент заменяет угадывание прямым управлением: двигаете ползунок — видите, как изгибается кривая и соответственно движется шарик предпросмотра, — а когда движение ощущается правильно, копируете CSS.

Источник: CSS Easing Functions Level 1, W3C — спецификация, определяющая cubic-bezier() и пять именованных ключевых слов, на которых основаны пресеты этого инструмента.

Зачем его использовать?

• Живой SVG-график наглядно показывает, как ваша кривая изгибается между фиксированными начальной и конечной точками, обе контрольные точки и их рычаги отображены для ясности.
• Кнопка воспроизведения анимирует элемент предпросмотра вдоль дорожки, используя именно вашу кривую, — так вы почувствуете движение, а не просто увидите статичный график.
• Пресеты в один клик для пяти стандартных именованных функций плавности — ease, ease-in, ease-out, ease-in-out и linear — согласно спецификации CSS Easing Functions.
• Значения y могут быть меньше 0 или больше 1, что позволяет создавать эффекты перелёта/отскока, недоступные именованным ключевым словам.
• Генерирует готовый к вставке CSS для transition-timing-function — то же значение работает и для animation-timing-function.
• Полностью работает в вашем браузере — ничего из того, что вы настраиваете, никуда не загружается. Бесплатно, без регистрации.

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

1. Перетащите ползунки x1/y1, чтобы задать первую контрольную точку, определяющую начало анимации.
2. Перетащите ползунки x2/y2, чтобы задать вторую контрольную точку, определяющую конец анимации.
3. Следите за чёрной кривой на графике — если она выгибается выше диагонали в начале, движение стартует быстро; если остаётся ниже — стартует медленно.
4. Нажмите «Воспроизвести», чтобы увидеть, как элемент предпросмотра движется по дорожке, используя вашу кривую в качестве transition-timing-function.
5. Попробуйте пресет (ease, ease-in, ease-out, ease-in-out, linear) как отправную точку, а затем подстройте ползунки.
6. Скопируйте сгенерированный CSS и вставьте его в правило transition или animation.

Пример

Ввод

x1: 0.25, y1: 0.1, x2: 0.25, y2: 1

Результат

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

Это стандартное ключевое слово CSS ease, записанное как явные контрольные точки — быстрый старт, а затем постепенное замедление к концу.

Почему значения y могут выходить за пределы 0–1

В отличие от оси x, которая представляет время и должна идти от 0 до 1, ось y представляет прогресс анимируемого значения и не имеет такого ограничения. Установка y1 ниже 0 или y2 выше 1 заставляет кривую опускаться ниже начального значения или проскакивать конечное значение перед тем, как устояться — это основа эффектов перелёта и «замаха», используемых при нажатии кнопок, появлении модальных окон и игривых микровзаимодействиях интерфейса. Ни одно из пяти именованных ключевых слов (ease, ease-in, ease-out, ease-in-out, linear) не может это создать — для этого нужен собственный cubic-bezier().

transition-timing-function против animation-timing-function

Значение cubic-bezier(), которое генерирует этот инструмент, работает одинаково в обоих свойствах. Используйте transition-timing-function, когда движение запускается изменением состояния (например, наведением или переключением класса), и animation-timing-function внутри правила анимации на основе @keyframes, когда нужно то же самое ощущение автоматически или в цикле.

Распространённые паттерны плавности

• Чёткая обратная связь интерфейса (кнопки, переключатели): держите контрольные точки близко к диагонали с лёгким смещением в сторону ease-out, например cubic-bezier(0.4, 0, 0.2, 1).
• Стандартная кривая Material Design: cubic-bezier(0.4, 0, 0.2, 1) — быстрый старт, мягкое завершение, широко используется для переходов панелей и карточек.
• Отскок/перелёт: поднимите y2 выше 1, например cubic-bezier(0.34, 1.56, 0.64, 1), для игривого эффекта появления.
• Замах перед движением: опустите y1 ниже 0, чтобы элемент слегка отодвинулся назад перед движением вперёд.
• Плавный ease-in-out для зацикленных анимаций: держите кривую почти симметричной относительно центра.

Сочетание с другими CSS-инструментами

Кривая плавности редко используется сама по себе — обычно она применяется к элементу, которому также нужны тени, скруглённые углы или градиенты. Сгенерируйте визуальное оформление другими CSS-инструментами ниже, а затем добавьте функцию времени из этого инструмента в то же правило или в объявление transition/animation.

→ Генератор Box Shadow · Генератор скругления углов

Часто задаваемые вопросы