Як створити власну криву плавності cubic-bezier для CSS?

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

Як створити ефект відскоку або виходу за межі за допомогою cubic-bezier?

Перетягніть маркер вище або нижче поля так, щоб його значення Y вийшло за межі 0-1. Y може перевищувати цей діапазон, тоді як X залишається між 0 та 1. Пресети back-out та anticipate є готовими відправними точками для виходу за межі.

Чи можу я отримати плавність для 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-function для CSS-анімацій keyframe.
Значення Нега для JS-Бібліотек АнімаційОтримайте значення cubic-bezier для GSAP, Framer Motion, anime.js та іншого.
Зрозумійте Як Працює НегаПобачте взаємозв'язок між кривою Безьє та рухом, який вона створює.

Як це працює

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

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