Generátor CSS Cubic-Bezier

Co je tento nástroj?

cubic-bezier() je CSS časovací funkce, která řídí, jak animovaná nebo přecházená hodnota zrychluje a zpomaluje v čase, místo pohybu konstantní rychlostí. Je definovaná dvěma kontrolními body — (x1, y1) a (x2, y2) — které ohýbají křivku mezi pevným počátečním bodem (0,0) a koncovým bodem (1,1). Hodnoty x musí zůstat mezi 0 a 1, ale hodnoty y mohou jít mimo tento rozsah pro vytvoření efektů přestřelení nebo odrazu.

Ručně napsané ladění čtyř desetinných čísel, aby výsledný pocit nebyl ani příliš prudký, ani příliš rozvláčný, vyžaduje spoustu pokusů a omylů. Tento nástroj nahrazuje toto hádání přímou manipulací: přetáhněte posuvník, sledujte, jak se křivka ohýbá a náhledový míček odpovídajícím způsobem pohybuje, a zkopírujte CSS, jakmile pohyb vypadá správně.

Zdroj: CSS Easing Functions Level 1, W3C — specifikace definující cubic-bezier() a pět pojmenovaných klíčových slov, na kterých jsou založené předvolby tohoto nástroje.

Proč ho používat?

• Živý SVG graf přesně ukazuje, jak se vaše křivka ohýbá mezi pevným počátečním a koncovým bodem, s vykreslenými oběma kontrolními body a jejich úchyty pro přehlednost.
• Tlačítko Play animuje náhledový element po dráze pomocí vaší přesné křivky, takže pohyb můžete cítit, ne jen vidět jako statický graf.
• Předvolby na jedno kliknutí pro pět standardních pojmenovaných easing funkcí — ease, ease-in, ease-out, ease-in-out a linear — jak jsou zdokumentovány ve specifikaci CSS Easing Functions.
• Hodnoty y mohou jít pod 0 nebo nad 1, což umožňuje vytvořit easingy ve stylu přestřelení/odrazu, které pojmenovaná klíčová slova nedokáží vytvořit.
• Vypisuje připravené CSS pro transition-timing-function — stejná hodnota funguje i pro animation-timing-function.
• Běží kompletně ve vašem prohlížeči — nic, co nastavíte, se nikam nenahrává. Zdarma, bez registrace.

Jak se používá

1. Přetáhněte posuvníky x1/y1, abyste nastavili první kontrolní bod, který tvaruje, jak animace začíná.
2. Přetáhněte posuvníky x2/y2, abyste nastavili druhý kontrolní bod, který tvaruje, jak animace končí.
3. Sledujte černou křivku na grafu — křivka, která se na začátku vydouvá nad diagonálu, znamená, že pohyb začíná rychle, ta, která zůstává pod ní, znamená, že pohyb začíná pomalu.
4. Klikněte na Play, abyste viděli náhledový element pohybující se po dráze pomocí vaší křivky jako transition-timing-function.
5. Vyzkoušejte předvolbu (ease, ease-in, ease-out, ease-in-out, linear) jako výchozí bod, poté odtud posuvníky doladíte.
6. Zkopírujte vygenerované CSS a vložte ho do pravidla transition nebo animation.

Příklad

Vstup

x1: 0.25, y1: 0.1, x2: 0.25, y2: 1

Výstup

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

Toto je standardní CSS klíčové slovo ease vypsané jako explicitní kontrolní body — rychlý start, prudké zrychlení a poté postupné zpomalování směrem ke konci.

Proč mohou hodnoty y přesáhnout 0–1

Na rozdíl od osy x, která představuje čas a musí běžet od 0 do 1, osa y představuje průběh animované hodnoty a nemá žádný takový limit. Nastavení y1 pod 0 nebo y2 nad 1 způsobí, že křivka klesne pod počáteční hodnotu nebo vystřelí nad koncovou hodnotu, než se ustálí — základ efektů přestřelení a anticipace používaných při stisknutí tlačítka, otevírání modálních oken a hravých mikrointerakcích UI. Žádné z pěti pojmenovaných klíčových slov (ease, ease-in, ease-out, ease-in-out, linear) toto nedokáže vytvořit; pro to potřebujete vlastní cubic-bezier().

transition-timing-function vs. animation-timing-function

Hodnota cubic-bezier(), kterou tento nástroj generuje, funguje shodně v obou vlastnostech. Použijte transition-timing-function, když je pohyb spouštěn změnou stavu (jako hover nebo přepnutí třídy), a animation-timing-function uvnitř pravidla animace řízeného @keyframes, když potřebujete stejný pocit easingu aplikovaný automaticky nebo ve smyčce.

Běžné vzory easingu

• Svižná UI zpětná vazba (tlačítka, přepínače): udržujte kontrolní body blízko diagonály s mírnou tendencí k ease-out, např. cubic-bezier(0.4, 0, 0.2, 1).
• Standardní křivka Material Design: cubic-bezier(0.4, 0, 0.2, 1) — rychlý start, jemné dokončení, široce používaná pro přechody panelů a karet.
• Odraz/přestřelení: posuňte y2 nad 1, např. cubic-bezier(0.34, 1.56, 0.64, 1), pro hravý pocit vyskočení.
• Anticipace před pohybem: posuňte y1 pod 0, aby se element před posunem vpřed mírně stáhl zpět.
• Plynulý ease-in-out pro smyčkové animace: udržujte křivku téměř symetrickou kolem středu.

Kombinace s dalšími CSS nástroji

Easing křivka málokdy stojí sama — obvykle se aplikuje na element, který také potřebuje definované stíny, zaoblené rohy nebo gradienty. Vygenerujte vizuální styling pomocí dalších CSS nástrojů níže, poté přidejte časovací funkci z tohoto nástroje do stejného pravidla nebo deklarace transition/animation.

→ Generátor box-shadow · Generátor border-radius

Časté dotazy