CSS kubični Bezier generator

Cubic Bezier dokumentacija

Što je kubična Bezierova krivulja?

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.

CSS sintaksa

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

Uobičajeni slučajevi upotrebe

Animirani prijelazi:Stvorite glatke animacije za elemente koji mijenjaju svojstva.
Efekti pomicanja:Kontrolirajte brzinu animacija pomicanja.
Interaktivni elementi:Definirajte kako elementi reagiraju na interakcije korisnika kao što su lebdenje pokazivačem miša ili klik.
Dizajn pokreta:Izradite složene sekvence pokreta za elemente korisničkog sučelja.

Popularne funkcije popuštanja

Ease (default)

Počinje sporo, brzo ubrzava, a zatim ponovno usporava.

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

Linear

Konstantna brzina od početka do kraja.

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

Ease-in

Počinje polako, a zatim ubrzava.

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

Ease-out

Počinje brzo, a zatim odgađa.

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

Savjeti za stvaranje prilagođenih krivulja

Držite x vrijednosti između 0 i 1:Vrijednosti izvan ovog raspona mogu uzrokovati neočekivano ponašanje.
Vizualizirajte krivulju:Pomoću interaktivnog grafikona shvatite kako promjene utječu na animaciju.
Test sa stvarnim elementima:Uvijek pregledajte svoju krivulju sa stvarnim komponentama korisničkog sučelja kako biste bili sigurni da se osjećate ispravno.
Spremi unaprijed postavljene postavke:Označite korisne krivulje za buduće projekte.