Kontrolne točke

Point P1 (x1, y1)

0 0.25 1
0 0.1 1

Point P2 (x2, y2)

0 0.25 1
0 1 1

Popularne unaprijed postavljene postavke popuštanja

CSS izlaz

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

Preview

Duration: 500ms

Vizualizacija Bezierove krivulje

time (1) easing (1) easing (0) P0 (0, 1) P1 (0.25, 0.1) P2 (0.25, 1) P3 (1, 1)

x1

0.25

y1

0.1

x2

0.25

y2

1

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

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

Related Tools

Pretvarač olovke u CSS

Transform your SCSS code into CSS. Fast, easy, and secure.

CSS Minifier

Komprimirajte i optimizirajte svoj CSS kod s profesionalnom preciznošću

Stvorite prekrasne CSS gradijente bez napora

Generirajte zapanjujuće linearne, radijalne i stožaste gradijente pomoću našeg intuitivnog sučelja. Kopirajte CSS kod i odmah ga upotrijebite u svojim projektima.

PayPal kalkulator naknade

Calculate PayPal fees for your transactions with our easy-to-use calculator.

Stvorite prekrasan CSS gradijent teksta bez napora

Stvorite zapanjujuće gradijentne tekstualne efekte za svoju web stranicu

Kalkulator vjerojatnosti

Calculate probabilities for various scenarios with our comprehensive probability calculator.