Kif noħloq kurva ta' easing cubic-bezier personalizzata għas-CSS?

Iġbed iż-żewġ punti ta' kontroll fuq il-graff, ikteb valuri eżatti ta' x1, y1, x2, y2, jew agħżel preset. Imbagħad agħżel CSS taħt Format tal-output u kklikkja Kopja biex tieħu l-valur ta' cubic-bezier() għal transition-timing-function.

Kif nagħmel effett ta' bounce jew overshoot b'cubic-bezier?

Iġbed punt ta' kontroll 'il fuq jew 'l isfel mill-kaxxa sabiex il-valur Y tiegħu jaqbeż 0-1. Y jista' jaqbeż dik il-medda, filwaqt li X jibqa' bejn 0 u 1. Il-presets back-out u anticipate huma punti tat-tluq lesti għal overshoot.

Nista' nikseb l-easing għal Tailwind, Framer Motion jew anime.js?

Iva. It-tabs tal-format tal-output huma CSS, Tailwind, Framer Motion u anime.js. Kollha jifformattjaw l-istess erba' numri, għalhekk agħżel tab u kklikkja Kopja biex tpoġġi l-kodiċi fil-clipboard tiegħek.

Kif ngħabbi valur eżistenti ta' cubic-bezier biex neditjah?

Waħħal valur bħal cubic-bezier(.17, .67, .83, .67) fil-kaxxa tal-importazzjoni u kklikkja Ikkarga. Jekk l-erba' numri ma jkunux jistgħu jinqraw, tirċievi messaġġ ta' żball. Il-kurva tiġi ssejvjata wkoll fil-URL tal-paġna wara l-hash, biex tkun tista' tinqasam.

Għaliex l-anteprima tidher aktar bil-mod mit-tranżizzjonijiet reali tiegħi?

L-Anteprima tal-moviment tuża setting ta' Durata li tista' tibdel, u l-valuri awtomatiċi huma aktar bil-mod biex tkun tista' tistudja l-kurva sew. Qassar id-Durata, imbagħad uża Erġa' ibda biex tara l-moviment bil-veloċità li biħsiebek tuża.

Iva. Kull għodda tista' tintuża b'xejn, mingħajr kont u mingħajr karta ta' kreditu. Ix-xogħol isir fuq it-tagħmir tiegħek minflok fuq is-servers tagħna, u huwa dan li jippermettilha tibqa' taħdem b'xejn.

Taħdem fuq il-mowbajl?

Iva. Jaħdem fil-browsers moderni tal-mowbajl fuq iOS u Android, mingħajr xejn x'tinstalla.

📈

Ġeneratur ta' Easing CSS Cubic-Bezier b'xejn

Iddesinja curves ta' easing CSS billi tiġbed il-punti tal-kontroll, ara l-moviment ħaj fil-preview, u ikkopja l-valur cubic-bezier(). Jinkludi presets overshoot/bounce.

Jaħdem fil-browser tiegħekMingħajr reġistrazzjoni, mingħajr pop-upsEbda login meħtieġĦieles għal dejjem

Jaħdem offline ladarba mgħobbi

Iġbed il-mankijiet teal u roża biex tifforma l-kurva

Punti ta' kontroll

x1y1x2y2

Anteprima tal-moviment

Durata1.6 s

Tranżizzjoni tal-wisa

Valur CSS

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

Presets

Il-mankijiet roża u teal jistgħu jiġbdu 'l fuq jew 'l isfel mill-kaxxa (Y lil hinn minn 0–1) biex joħolqu effetti ta' tgerbieb/rimbalz bħal back-out u anticipate. X jibqa' fi ħdan 0–1 (iż-żmien ma jistax jirritorna).

Użi komuni

Tgħaddi Custom CSS TransitionDedika 'natural-feeling easing għal hover effects, menus, u UI transitions.
Bounce u Overshoot AnimationsOħloq playful spring/bounce motion bi ġbid il-punti tal-kontroll lil hinn mill-kaxxa.
Easing għal @keyframes AnimationsAgħżel il-funzjoni tal-animation-timing-function dritt għal CSS keyframe animations.
Easing Values għal JS Animation LibrariesIkseb cubic-bezier values għal GSAP, Framer Motion, anime.js, u aktar.
Fehom Kif il-Easing JaħdemAra r-relazzjoni bejn kurva bezier u l-moviment li tipproduċi.

Kif Taħdem

L-editur huwa mibni kompletament fil-browser bl-użu tal-istat ta' React u SVG — l-ebda librerija timmaniġġja l-matematika tal-kurva. Żewġ punti ta' kontroll li tista' tiġbed jiddefinixxu triq Bezier kubika SVG, u l-magna ta' animazzjoni CSS tal-browser stess tħaddem l-anteprima tal-moviment billi tinserixxi l-valur cubic-bezier() riżultanti direttament f'regola @keyframes.

1
Iġbed jew ittajpja l-punti ta' kontroll
Żewġ manek (P1 fit-teal, P2 fir-roża) joqgħodu fuq canvas SVG. L-iġbid juża l-Pointer Events API b'setPointerCapture biex il-manek isegwi subgħajk jew il-cursor tiegħek anke barra mill-fruntiera SVG. Tista' wkoll timbotta l-manek bit-tastiera tal-vleġeġ jew tittajpja valuri eżatti fid-dħul numeriku x1/y1/x2/y2.
2
L-SVG jiddisinja l-kurva f'ħin reali
Il-kurva hija element <path> SVG wieħed li l-kmand C (Bezier kubika) tiegħu jerġa' jiġi kkalkulat mill-erba' koordinati tal-punti ta' kontroll f'kull aġġornament tal-istat. L-ebda canvas, l-ebda librerija esterna — il-magna tar-rendjar SVG tal-browser tiddisinja t-triq direttament.
3
Il-magna CSS tal-browser tagħti anteprima tal-easing
Tliet animazzjonijiet ħajjin (punt li jiskorri, transizzjoni tal-wisa', u skala) iħaddmu CSS @keyframes bil-valur cubic-bezier() inserit inline. Il-magna tal-animazzjoni stess tal-browser tinterpreta l-kurva, għalhekk dak li tara huwa eżatt dak li s-CSS tal-produzzjoni tiegħek se tipproduċi.
4
Ikkopja l-biċċa fis-sintassi tal-framework tiegħek
Tabs jifformattaw l-istess erba' numri bħala CSS transition-timing-function, klassi ta' valur arbitrarju ta' Tailwind, array easing ta' Framer Motion, jew string easing ta' anime.js. Il-biċċa tinkiteb fil-clipboard b'navigator.clipboard. Il-kurva hija wkoll ikkodifikata fil-hash tal-URL (#b=x1,y1,x2,y2) biex tista' taqsam jew tissejvja bookmark tagħha.