Как создать пользовательскую кривую easing cubic-bezier для CSS?

Перетаскивайте две ручки контрольных точек на графике, введите точные значения x1, y1, x2, y2 или выберите пресет. Затем выберите CSS в «Формат вывода» и нажмите «Копировать», чтобы получить значение cubic-bezier() для transition-timing-function.

Как сделать эффект отскока или вылета с помощью cubic-bezier?

Перетащите ручку выше или ниже поля так, чтобы её значение Y вышло за пределы 0–1. Y может выходить за этот диапазон, в то время как X остаётся между 0 и 1. Пресеты обратного вылета и упреждения — это готовые отправные точки для эффекта overshoot.

Можно ли получить easing для Tailwind, Framer Motion или anime.js?

Да. Вкладки формата вывода: CSS, Tailwind, Framer Motion и anime.js. Все они форматируют одни и те же четыре числа, так что выберите вкладку и нажмите «Копировать», чтобы поместить фрагмент кода в буфер обмена.

Как загрузить существующее значение cubic-bezier для редактирования?

Вставьте значение, например cubic-bezier(.17, .67, .83, .67), в поле импорта и нажмите «Загрузить». Если четыре числа не могут быть прочитаны, вы получите сообщение об ошибке. Кривая также сохраняется в URL страницы после хеша, так что ею можно поделиться.

Почему превью кажется медленнее, чем мои реальные переходы?

«Превью движения» использует настройку «Длительность», которую вы можете изменить, и по умолчанию она медленнее, чтобы вы могли изучить кривую. Уменьшите «Длительность», затем используйте повтор, чтобы увидеть движение на той скорости, с которой планируете его использовать.

Это правда бесплатно?

Да. Все инструменты бесплатны, без учётной записи и банковской карты. Работа выполняется на вашем устройстве, а не на наших серверах, что и позволяет оставаться бесплатными.

Работает на мобильных устройствах?

Да. Работает в современных мобильных браузерах на iOS и Android, ничего устанавливать не нужно.

📈

Генератор CSS Cubic-Bezier — бесплатно

Проектируйте кривые CSS-анимации перетаскиванием контрольных точек, просматривайте движение в реальном времени и копируйте значение cubic-bezier(). Включает пресеты отскока и перелёта.

Работает в браузереБез регистрации и всплывающих оконРегистрация не требуетсяБесплатно навсегда

Работает офлайн после загрузки

Тяните бирюзовый и розовый маркеры, чтобы изменить форму кривой

Контрольные точки

x1y1x2y2

Превью движения

Длительность1,6 с

Переход ширины

Значение CSS

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

Пресеты

Розовый и бирюзовый маркеры можно вытягивать выше или ниже блока (Y за пределами 0-1) для создания эффектов «перебега» / отскока, как в back-out и anticipate. X остаётся в пределах 0-1 (время не может идти назад).

Частые применения

Пользовательское облегчение переходов CSSРазработайте естественное облегчение для эффектов наведения, меню и переходов UI.
Анимации отскока и избыточного ходилаСоздавайте игривое движение пружины/отскока, вытягивая контрольные точки за границы поля.
Облегчение для анимаций @keyframesВыберите правильную функцию animation-timing для анимаций CSS keyframe.
Значения облегчения для библиотек анимации JSПолучите значения cubic-bezier для GSAP, Framer Motion, anime.js и другого.
Поймите, как работает облегчениеУвидите связь между кривой безье и движением, которое она производит.

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

Редактор построен полностью в браузере с использованием состояния React и SVG — никакая библиотека не обрабатывает математику кривой. Две перетаскиваемые контрольные точки определяют кубический путь Безье SVG, и собственный движок анимации CSS браузера запускает предпросмотр движения, вставляя получившееся значение cubic-bezier() прямо в правило @keyframes.

1
Перетащите или введите контрольные точки
Два маркера (P1 бирюзовый, P2 розовый) находятся на холсте SVG. Перетаскивание использует API Pointer Events с setPointerCapture, так что маркер отслеживает ваш палец или курсор даже за пределами границы SVG. Вы также можете подвинуть маркеры стрелками или ввести точные значения в числовые поля x1/y1/x2/y2.
2
SVG рисует кривую в реальном времени
Кривая — это единый элемент SVG <path>, чья команда C (кубический Безье) пересчитывается из четырёх координат контрольных точек при каждом обновлении состояния. Никакого холста, никакой внешней библиотеки — собственный рендерер SVG браузера рисует путь напрямую.
3
Движок CSS браузера показывает предпросмотр анимации
Три живые анимации (скользящая точка, переход ширины и масштабирование) запускают CSS @keyframes со значением cubic-bezier(), вставленным инлайн. Собственный движок анимации браузера интерпретирует кривую, так что то, что вы видите — это точно то, что произведёт ваш производственный CSS.
4
Скопируйте фрагмент в синтаксисе вашего фреймворка
Вкладки форматируют те же четыре числа как CSS transition-timing-function, класс Tailwind с произвольным значением, массив easing Framer Motion, или строку easing anime.js. Фрагмент записывается в буфер обмена через navigator.clipboard. Кривая также кодируется в хэше URL (#b=x1,y1,x2,y2), так что вы можете поделиться ею или добавить в закладки.

Генератор CSS Cubic-Bezier — бесплатно

Частые применения

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

Похожие инструменты

Плавное появление/затухание аудио

Редактор субтитров

Генератор CSS Grid

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