Как да създам персонализирана 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 адреса на страницата след хеша, така че може да бъде споделена.

Защо прегледът се усеща по-бавен от реалните ми преходи?

Прегледът на движението използва настройка за Продължителност, която можете да промените, като стойностите по подразбиране са по-бавни, за да можете да изучавате кривата. Намалете Продължителността, след което използвайте Replay, за да видите движението със скоростта, с която планирате да го пуснете.

Наистина ли е безплатно?

Да. Всеки инструмент е безплатен, без акаунт и кредитна карта. Работата се извършва на вашето устройство, а не на наши сървъри, което позволява да бъде безплатна.

Работи ли на мобилни устройства?

Да. Работи в съвременните мобилни браузъри на 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 анимацииИзберете правилната функция на синхронизиране на анимация за CSS keyframe анимации.
Облекчение стойности за JS анимационни библиотекиПолучете кубни стойности на Bezier за GSAP, Framer Motion, anime.js и още.
Разберете как работи облекчениетоВижте връзката между крива на Bezier и движението, което произвежда.

Как работи

Редакторът е изграден изцяло в браузъра чрез React state и 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, масив на изглаждане за Framer Motion или низ на изглаждане за anime.js. Откъсът се записва в клипборда чрез navigator.clipboard. Кривата се кодира и в хеша на URL адреса (#b=x1,y1,x2,y2), така че можете да я споделите или отметнете.