Gjeneratori CSS Cubic Bezier

Dokumentacioni i Bezierit Kub

Çfarë është një kurbë kubike Bezier?

A cubic Bezier curve is defined by four points: P0, P1, P2, and P3. In CSS transitions, P0 and P3 are fixed at (0, 0) and (1, 1) respectively, representing the start and end of the transition. The curve is determined by the coordinates of the two control points, P1 and P2.

Sintaksa CSS

transition-timing-function: cubic-bezier(x1, y1, x2, y2);

Rastet e Përdorimit të Zakonshëm

Tranzicione të animuara:Krijo animacione të lëmuara për elementët që ndryshojnë vetitë.
Efektet e lëvizjes:Kontrolloni shpejtësinë e animacioneve të lëvizjes.
Elemente interaktive:Përcaktoni se si elementët reagojnë ndaj ndërveprimeve të përdoruesit, si p.sh., mbajtja pezull ose klikimi.
Dizajni i Lëvizjes:Krijoni sekuenca komplekse lëvizjeje për elementët e ndërfaqes së përdoruesit.

Funksionet e Lehtësimit Popullor

Ease (default)

Fillon ngadalë, përshpejtohet shpejt dhe pastaj ngadalësohet përsëri.

cubic-bezier(0.25, 0.1, 0.25, 1)

Linear

Shpejtësi konstante nga fillimi në fund.

cubic-bezier(0, 0, 1, 1)

Ease-in

Fillon ngadalë, pastaj përshpejtohet.

cubic-bezier(0.42, 0, 1, 1)

Ease-out

Fillon shpejt, pastaj ngadalësohet.

cubic-bezier(0, 0, 0.58, 1)

Këshilla për krijimin e kthesave të personalizuara

Mbani vlerat x midis 0 dhe 1:Vlerat jashtë këtij diapazoni mund të shkaktojnë sjellje të papritura.
Vizualizoni kurbën:Përdorni grafikun interaktiv për të kuptuar se si ndryshimet ndikojnë në animacion.
Test me elementë realë:Gjithmonë shikoni paraprakisht kurbën tuaj me komponentët aktualë të ndërfaqes së përdoruesit për t'u siguruar që ndihet e drejtë.
Ruaj cilësimet e paracaktuara:Vendosni shënues në kthesa të dobishme për projektet e ardhshme.