Kako da kreiram prilagođenu cubic-bezier krivulju ublažavanja za CSS?

Povucite dvije ručice kontrolnih točaka na grafu, upišite točne vrijednosti x1, y1, x2, y2 ili odaberite predložak. Zatim odaberite CSS pod Format izlaza i kliknite Kopiraj da dobijete cubic-bezier() vrijednost za transition-timing-function.

Kako da napravim efekt odskakanja ili prebačaja s cubic-bezier?

Povucite ručicu iznad ili ispod okvira tako da njezina Y vrijednost prijeđe 0-1. Y može premašiti taj raspon, dok X ostaje između 0 i 1. Predlošci back-out i anticipate gotove su početne točke za prebačaj.

Mogu li dobiti ublažavanje za Tailwind, Framer Motion ili anime.js?

Da. Kartice formata izlaza su CSS, Tailwind, Framer Motion i anime.js. Sve formatiraju ista četiri broja, pa odaberite karticu i kliknite Kopiraj da stavite isječak u međuspremnik.

Kako da učitam postojeću cubic-bezier vrijednost za uređivanje?

Zalijepite vrijednost poput cubic-bezier(.17, .67, .83, .67) u okvir za uvoz i kliknite Učitaj. Ako se četiri broja ne mogu pročitati, dobit ćete poruku o pogrešci. Krivulja je također pohranjena u URL-u stranice nakon hasha, tako da se može dijeliti.

Zašto se pregled čini sporijim od mojih stvarnih prijelaza?

Pregled animacije koristi postavku Trajanje koju možete promijeniti, a zadane vrijednosti su sporije kako biste mogli proučiti krivulju. Skratite Trajanje, zatim koristite Ponovno pusti da vidite kretanje brzinom koju planirate objaviti.

Je li stvarno besplatno?

Da. Svaki alat je besplatan za korištenje, bez računa i bez kreditne kartice. Rad se odvija na vašem uređaju, a ne na našim poslužiteljima, što omogućuje da ostane besplatan.

Radi li na mobilnim uređajima?

Da. Radi u aktualnim mobilnim preglednicima na iOS-u i Androidu, bez instalacije.

📈

Generator CSS Cubic-Bezier zakrivljenosti — besplatno

Dizajnirajte CSS krivulje zakrivljenosti povlačenjem kontrolnih točaka, pregledajte animaciju uživo i kopirajte cubic-bezier() vrijednost. Uključuje predloške za nadvišenje/odbijanje.

Radi u preglednikuBez registracije, bez skočnih prozoraNije potrebna prijavaBesplatno zauvijek

Radi offline nakon učitavanja

Povucite teal i rose ručice za oblikovanje krivulje

Kontrolne točke

x1y1x2y2

Pregled animacije

Trajanje1,6 s

Prijelaz širine

CSS vrijednost

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

Unaprijed postavljeni

Rose i teal ručice mogu se povući iznad ili ispod okvira (Y izvan 0-1) za efekte „preleta" / odbijanja poput back-out i anticipate. X ostaje unutar 0-1 (vrijeme ne može ići unazad).

Uobičajene namjene

Prilagođena CSS prijelazna olakšanjaDizajnirajte prirodan osjećaj olakšanja za efekte lebdenja, izbornike i UI prijelaze.
Animacije skakanja i prekoračenjaKreirajte vesele opruge/skakanja kretanja vučenjem kontrolnih točaka izvan kutije.
Olakšanja za @keyframes animacijeOdaberite pravu funkciju vremenske animacije za CSS keyframe animacije.
Olakšanja vrijednosti za JS animacijske knjižniceDobijte kubne Bezierove vrijednosti za GSAP, Framer Motion, anime.js i više.
Razumite kako funkcionira olakšanjeVidite odnos između Bezierove krivulje i kretanja koje proizvodi.

Kako funkcionira

Uređivač je izgrađen u potpunosti u pregledniku koristeći React state i SVG — nijedna biblioteka ne upravlja matematikom krivulje. Dvije točke kontrole koje se mogu povući definiraju SVG kubnu Bezierovu putanju, a vlastiti mehanizam CSS animacije preglednika pokreće pregled pokreta umetanjem rezultirajuće vrijednosti cubic-bezier() izravno u @keyframes pravilo.

1
Povucite ili utipkajte kontrolne točke
Dvije ručke (P1 tirkizna, P2 ružičasta) sjede na SVG platnu. Povlačenje koristi Pointer Events API sa setPointerCapture tako da ručka prati vaš prst ili pokazivač čak i izvan granice SVG-a. Također možete gurnuti ručke tipkama strelica ili utipkati točne vrijednosti u brojčane unose x1/y1/x2/y2.
2
SVG crta krivulju u stvarnom vremenu
Krivulja je jedan SVG <path> element čija se C (kubna Bezierova) naredba ponovno izračunava iz koordinata četiri kontrolne točke pri svakom ažuriranju stanja. Bez platna, bez vanjske biblioteke — SVG renderer preglednika izravno crta putanju.
3
CSS mehanizam preglednika prikazuje ublažavanje
Tri animacije uživo (klizeća točka, prijelaz širine i skala) pokreću CSS @keyframes s vrijednosti cubic-bezier() ugrađenom u redak. Vlastiti mehanizam animacije preglednika tumači krivulju, tako da ono što vidite je točno ono što će vaš produkcijski CSS proizvesti.
4
Kopirajte isječak u sintaksi vašeg okvira
Kartice formatiraju iste četiri brojke kao CSS transition-timing-function, Tailwind klasu proizvoljne vrijednosti, niz Framer Motion ease ili niz ublažavanja anime.js. Isječak se zapisuje u međuspremnik pomoću navigator.clipboard. Krivulja se također kodira u URL hashu (#b=x1,y1,x2,y2) tako da je možete podijeliti ili spremiti u knjižne oznake.