Ohjauspisteet

Point P1 (x1, y1)

0 0.25 1
0 0.1 1

Point P2 (x2, y2)

0 0.25 1
0 1 1

Suositut helpottamisen esiasetukset

CSS-tulostus

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

Preview

Duration: 500ms

Bezier-käyrän visualisointi

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 Bezierin dokumentaatio

Mikä on kuutiometrinen Bezier-käyrä?

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-syntaksi

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

Yleiset käyttötapaukset

  • Animoidut siirtymät:Luo sulavia animaatioita elementeille,
  • Vieritystehosteet:Säädä vieritysanimaatioiden nopeutta.
  • Interaktiiviset elementit:miten elementit reagoivat käyttäjän vuorovaikutukseen, kuten hiiren osoittimeen tai napsauttamiseen.
  • Liikesuunnittelu:Luo monimutkaisia liikesarjoja käyttöliittymäelementeille.

Suositut kevennystoiminnot

Ease (default)

Käynnistyy hitaasti, kiihtyy nopeasti ja hidastuu sitten uudelleen.

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

Linear

Tasainen nopeus alusta loppuun.

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

Ease-in

Käynnistyy hitaasti, sitten kiihtyy.

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

Ease-out

Lähtee liikkeelle nopeasti, hidastaa sitten.

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

Vinkkejä mukautettujen käyrien luomiseen Pidä

  1. x-arvot välillä 0–1:Tämän alueen ulkopuolella olevat arvot voivat aiheuttaa odottamatonta toimintaa.
  2. Visualisoi käyrä:Käytä interaktiivista kaaviota ymmärtääksesi, miten muutokset vaikuttavat animaatioon.
  3. Testaa todellisilla elementeillä:Esikatsele käyrääsi aina todellisilla käyttöliittymäkomponenteilla varmistaaksesi,
  4. Tallenna esiasetukset:Lisää hyödyllisiä käyriä kirjanmerkkeihin tulevia projekteja varten.

Related Tools

CSS3-siirtymägeneraattori

Sujuva peittävyyden siirtyminen

Less CSS-muotoon -muunnin

Muunna Less-koodisi CSS:ksi. Nopeaa, helppoa ja turvallista.

Sass:sta CSS:ksi muunnin

Muunna Sass-koodisi CSS:ksi. Nopeaa, helppoa ja turvallista.

Ikälaskuri

Laske tarkka ikäsi vuosina, kuukausina ja päivinä tarkalla ikälaskurillamme.

Heksa binaariksi

Muunna heksadesimaalikoodi binääriksi vaivattomasti

HSV Pantoneksi

varten Muunna HSV-värikoodit Pantone-viitteiksi® painosuunnittelua