CSS Cubic Bezier generátor

Cubic Bezier dokumentáció

Mi az a köbös Bezier-görbe?

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 szintaxis

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

Gyakori használati esetek

Animált átmenetek:Hozzon létre sima animációkat a tulajdonságokat módosító elemekhez.
Görgetési effektusok:Szabályozza a görgetési animációk sebességét.
Interaktív elemek:Határozza meg, hogy az elemek hogyan reagálnak a felhasználói interakciókra, például az egérmutatóra vagy a kattintásra.
Mozgástervezés:Készítsen összetett mozgási szekvenciákat a felhasználói felület elemeihez.

Népszerű könnyítő funkciók

Ease (default)

Lassan indul, gyorsan gyorsul, majd újra lelassul.

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

Linear

Állandó sebesség az elejétől a végéig.

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

Ease-in

Lassan indul, majd gyorsul.

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

Ease-out

Gyorsan indul, majd lassít.

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

Tippek egyéni görbék létrehozásához

Tartsa az x értékeket 0 és 1 között:A tartományon kívüli értékek váratlan viselkedést okozhatnak.
Vizualizálja a görbét:Az interaktív grafikon segítségével megértheti, hogy a változások hogyan befolyásolják az animációt.
Teszt valós elemekkel:Mindig tekintse meg a görbe előnézetét a tényleges felhasználói felület összetevőivel, hogy megbizonyosodjon arról, hogy megfelelőnek érzi magát.
Előre beállított értékek mentése:Hasznos görbék könyvjelzővel való megjelölése a jövőbeni projektekhez.