Generátor kubických Bézierových čísel CSS

Kubická Bézierova křivka Dokumentace

Co je kubická Bézierova křivka?

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.

Syntaxe

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

Běžné případy

Animované přechody:Vytvářejte hladké animace pro prvky měnící vlastnosti.
Efekty posouvání:Ovládejte rychlost animací posouvání.
Interaktivní prvky:Definujte, jak prvky reagují na interakce uživatele, jako je najetí myší nebo kliknutí.
Motion Design:Vytvářejte složité pohybové sekvence pro prvky uživatelského rozhraní.

Populární funkce

Ease (default)

/doběhu Začíná pomalu, rychle zrychluje a pak opět zpomaluje.

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

Linear

Konstantní rychlost od začátku do konce.

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

Ease-in

Začíná pomalu, pak zrychluje.

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

Ease-out

Rozběhne se rychle, pak zpomalí.

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

Tipy pro vytváření vlastních křivek:

Zachování hodnot x mezi 0 a 1:Hodnoty mimo tento rozsah může způsobit neočekávané chování.
Vizualizace křivky:Pomocí interaktivního grafu můžete pochopit, jak změny ovlivňují animaci.
Testujte se skutečnými prvky:Vždy si prohlédněte náhled křivky se skutečnými komponentami uživatelského rozhraní, abyste se ujistili, že se cítí správně.
Uložit přednastavení:Uložit užitečné křivky do záložek pro budoucí projekty.