📈

Бесплатен Генератор на CSS cubic-bezier забрзување

Дизајнирајте CSS криви на забрзување со влечење на контролни точки, прегледајте го движењето во живо и копирајте ја вредноста cubic-bezier(). Вклучува претходно поставени опции за прескок/отскок.

Работи во вашиот прелистувачБез регистрација, без скокачки прозорциНе е потребно најавувањеБесплатно засекогаш

Работи офлајн откако ќе се вчита

Влечи ги тил и розовите рачки за да ја обликуваш кривата

Контролни точки

x1y1x2y2

Преглед на движење

Времетраење1.6s

Транзиција на ширина

CSS вредност

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

Предефинирани

Розовата и тил-рачките можат да се влечат над или под кутијата (Y надвор од 0-1) за да создадат ефекти на 'пребачување' / отскок како back-out и anticipate. X останува во опсегот 0-1 (времето не може да се врати назад).

Како функционира

Уредникот е изграден целосно во прелистувачот користејќи React состојба и SVG — ниту една библиотека не ја обработува математиката на кривата. Две контролни точки што можат да се повлекуваат дефинираат SVG кубна Bezier патека, а сопствениот CSS механизам за анимација на прелистувачот го извршува прегледот на движењето со вметнување на резултирачката вредност cubic-bezier() директно во @keyframes правило.

1
Повлечете или напишете контролни точки
Две рачки (P1 во тиркизно, P2 во розово) седат на SVG платно. Повлекувањето ја користи Pointer Events API со setPointerCapture така што рачката го следи вашиот прст или курсор дури и надвор од границите на SVG. Можете исто така да ги поместувате рачките со копчињата со стрелки или да напишете точни вредности во нумеричките полиња x1/y1/x2/y2.
2
SVG ја исцртува кривата во реално време
Кривата е единствен SVG елемент <path> чија команда C (кубна Bezier) се препресметува од четирите координати на контролните точки при секое ажурирање на состојбата. Без 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) така што можете да ја споделите или обележите.