📈

Besplatan Generator CSS cubic-bezier animacija

Dizajnirajte krive CSS animacija povlačenjem kontrolnih tačaka, pregledajte pokret uživo i kopirajte vrijednost cubic-bezier(). Uključuje predloške za preskok i odbijanje.

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

Radi offline nakon učitavanja

Povucite tirkiznu i rozu ručku da oblikujete krivu

Kontrolne tačke

x1y1x2y2

Pregled kretanja

Trajanje1.6s

Prijelaz širine

CSS vrijednost

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

Predefinisano

Roza i tirkizna ručka mogu povući iznad ili ispod okvira (Y izvan 0-1) da stvore efekat 'preskakanja' / odskoka poput back-out i anticipate. X ostaje unutar 0-1 (vrijeme se ne može vratiti unazad).

Kako radi

Editor je izgrađen u potpunosti u pregledniku koristeći React stanje i SVG — nijedna biblioteka ne rukuje matematikom krive. Dvije tačke kontrole koje se mogu povlačiti definišu SVG kubnu Bezier putanju, i vlastiti CSS mehanizam animacije preglednika pokreće pregled kretanja umetanjem rezultujuće vrijednosti cubic-bezier() direktno u @keyframes pravilo.

1
Povucite ili upišite tačke kontrole
Dvije ručke (P1 u tirkiznoj, P2 u ružičastoj) se nalaze na SVG platnu. Povlačenje koristi Pointer Events API sa setPointerCapture tako da ručka prati vaš prst ili kursor čak i izvan granica SVG-a. Ručke takođe možete pomjerati tasterima strelica ili upisati tačne vrijednosti u brojčane unose x1/y1/x2/y2.
2
SVG crta krivu u realnom vremenu
Kriva je jedan SVG <path> element čija se C (kubna Bezier) komanda ponovo izračunava iz koordinata četiri tačke kontrole pri svakom ažuriranju stanja. Bez canvas-a, bez vanjske biblioteke — SVG mehanizam preglednika direktno crta putanju.
3
CSS mehanizam preglednika pregleda krivu lakoće
Tri animacije uživo (klizeća tačka, prelaz širine, i skaliranje) pokreću CSS @keyframes sa vrijednošću cubic-bezier() umetnutom inline. Vlastiti mehanizam animacije preglednika tumači krivu, tako da ono što vidite je tačno ono što će vaš produkcijski CSS proizvesti.
4
Kopirajte isječak u sintaksi vašeg okvira
Kartice formatiraju ista četiri broja kao CSS transition-timing-function, Tailwind klasu proizvoljne vrijednosti, Framer Motion niz lakoće, ili anime.js niz lakoće. Isječak se zapisuje u međuspremnik pomoću navigator.clipboard. Kriva se takođe kodira u hash-u URL-a (#b=x1,y1,x2,y2) tako da je možete podijeliti ili sačuvati u zabilješkama.