Kako da napravim prilagođenu cubic-bezier krivu ublažavanja za CSS?

Prevucite dve ručice kontrolnih tačaka na grafikonu, unesite tačne vrednosti x1, y1, x2, y2 ili izaberite predložak. Zatim izaberite CSS pod Format izlaza i kliknite Kopiraj da dobijete cubic-bezier() vrednost za transition-timing-function.

Kako da napravim efekat odskakanja ili prebačaja sa cubic-bezier?

Prevucite ručicu iznad ili ispod okvira tako da njena Y vrednost pređe 0-1. Y može da pređe taj opseg, dok X ostaje između 0 i 1. Predlošci back-out i anticipate su gotove polazne tač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 one formatiraju ista četiri broja, pa izaberite karticu i kliknite Kopiraj da stavite isečak u privremenu memoriju.

Kako da učitam postojeću cubic-bezier vrednost da je izmenim?

Nalepite vrednost kao što je cubic-bezier(.17, .67, .83, .67) u polje za uvoz i kliknite Učitaj. Ako četiri broja ne mogu da se pročitaju, dobijate poruku o grešci. Kriva se takođe čuva u URL-u stranice posle heša, tako da može da se deli.

Zašto je pregled sporiji od mojih stvarnih prelaza?

Pregled animacije koristi podešavanje Trajanje koje možete promeniti, a podrazumevane vrednosti su sporije da biste mogli da proučite krivu. Skratite Trajanje, a zatim koristite Ponovo pusti da vidite pokret brzinom koju planirate da objavite.

Da li je zaista besplatno?

Da. Svaka alatka je besplatna za korišćenje, bez naloga i bez kreditne kartice. Obrada se obavlja na vašem uređaju, a ne na našim serverima, što omogućava da ostane besplatna.

Da li radi na mobilnim uređajima?

Da. Radi u aktuelnim mobilnim pregledačima na iOS-u i Androidu, bez instalacije.

📈

Generator CSS kubne Bezierove krive — besplatno

Dizajnirajte CSS krive easing-a prevlačenjem kontrolnih tačaka, pregledajte kretanje uživo i kopirajte cubic-bezier() vrednost. Uključuje presetove za pregib/odskoku.

Radi u pregledačuBez registracije, bez iskačućih prozoraNije potrebna prijavaBesplatno zauvek

Radi van mreže kada se učita

Prevucite teal i rose ručice da biste oblikovali krivu

Kontrolne tačke

x1y1x2y2

Pregled animacije

Trajanje1,6 с

Tranzicija širine

CSS vrednost

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

Unapred podešeni

Rose i teal ručice mogu se povući iznad ili ispod okvira (Y van 0-1) za efekte „prelaza" / odbijanja poput back-out i anticipate. X ostaje u okviru 0-1 (vreme ne može da se obrne).

Uobičajene upotrebe

Prilagođena CSS perehodna olakšanjaDizajnirajte prirodno osećajnu olakšanja za hver efekte, menijee i UI prehode.
Skočne animacije i preklapanjaNapravite vesela proletna/skočna kretanja vučenjem kontrolnih tačaka izvan kutije.
Olakšanja za @keyframes animacijeIzaberite pravu funkciju animacije za CSS keyframe animacije.
Olakšanja vrednosti za JS animacijske bibliotekeDobijte kubne bezijerove vrednosti za GSAP, Framer Motion, anime.js i drugo.
Razumite kako funkcioniše olakšavaVidite odnos između bezier krive i kretanja koje proizvodi.

Kako funkcioniše

Editor je izgrađen u potpunosti u pregledaču koristeći React stanje i SVG — nijedna biblioteka ne rukuje matematikom krive. Dve tačke kontrole koje se mogu prevlačiti definišu SVG kubnu Bezierovu putanju, a sopstveni CSS mehanizam animacije pregledača pokreće pregled kretanja ubacivanjem rezultujuće vrednosti cubic-bezier() direktno u @keyframes pravilo.

1
Prevucite ili otkucajte tačke kontrole
Dve ručke (P1 tirkizna, P2 roze) sede na SVG platnu. Prevlačenje koristi Pointer Events API sa setPointerCapture tako da ručka prati vaš prst ili kursor čak i van granica SVG-a. Takođe možete pomerati ručke strelicama ili otkucati tačne vrednosti u brojčanim poljima x1/y1/x2/y2.
2
SVG crta krivu u realnom vremenu
Kriva je jedan SVG <path> element čija se C (kubna Bezierova) komanda ponovo izračunava iz koordinata četiri tačke kontrole pri svakoj promeni stanja. Bez platna (canvas), bez spoljne biblioteke — SVG mehanizam za iscrtavanje pregledača crta putanju direktno.
3
CSS mehanizam pregledača prikazuje pregled ublažavanja
Tri animacije uživo (klizeća tačka, tranzicija širine, i skaliranje) pokreću CSS @keyframes sa vrednošću cubic-bezier() ubačenom inline. Sopstveni mehanizam animacije pregledača tumači krivu, tako da je ono što vidite tačno ono što će vaš produkcioni CSS proizvesti.
4
Kopirajte isečak u sintaksi vašeg okvira
Kartice formatiraju ista četiri broja kao CSS transition-timing-function, Tailwind klasu proizvoljne vrednosti, Framer Motion niz ublažavanja, ili anime.js niz ublažavanja. Isečak se upisuje u privremenu memoriju pomoću navigator.clipboard. Kriva se takođe kodira u URL heš (#b=x1,y1,x2,y2) tako da je možete podeliti ili obeležiti.