Pikat e Kontrollit

Point P1 (x1, y1)

0 0.25 1
0 0.1 1

Point P2 (x2, y2)

0 0.25 1
0 1 1

Paracaktimet popullore të lehtësimit

Dalja e CSS-së

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

Preview

Duration: 500ms

Vizualizimi i Kurbës Bezier

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

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

  1. Mbani vlerat x midis 0 dhe 1:Vlerat jashtë këtij diapazoni mund të shkaktojnë sjellje të papritura.
  2. Vizualizoni kurbën:Përdorni grafikun interaktiv për të kuptuar se si ndryshimet ndikojnë në animacion.
  3. 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ë.
  4. Ruaj cilësimet e paracaktuara:Vendosni shënues në kthesa të dobishme për projektet e ardhshme.

Related Tools

Konvertuesi më pak në CSS

Transformoni kodin tuaj Less në CSS. Shpejt, lehtë dhe sigurt.

Konvertuesi i stilolapsit në CSS

Transformoni kodin tuaj SCSS në CSS. Shpejt, lehtë dhe sigurt.

Gjeneroni transformime CSS3 me lehtësi

Një mjet i fuqishëm dhe intuitiv për krijimin e transformimeve komplekse CSS3 pa shkruar kod. Vizualizoni ndryshimet në kohë reale dhe kopjoni CSS-në e gjeneruar për ta përdorur në projektet tuaja.

Kalkulator Hash CRC-32

Gjeneroni shuma kontrolli CRC-32 shpejt dhe lehtë

Mjeti i Kodimit të URL-së

Kodimi i parametrave të URL-së me lehtësi direkt në shfletuesin tuaj.

Kalkulatori i Marzhit

Llogaritni marzhin e fitimit, marzhin bruto dhe çmimin e shtuar me kalkulatorin tonë gjithëpërfshirës të marzhit.