Generátor CSS cubic-bezier

Čo je tento nástroj?

cubic-bezier() je CSS časovacia funkcia, ktorá riadi, ako animovaná alebo prechodová hodnota v čase zrýchľuje a spomaľuje, namiesto pohybu konštantnou rýchlosťou. Je definovaná dvoma riadiacimi bodmi — (x1, y1) a (x2, y2) — ktoré ohýbajú krivku medzi pevným počiatočným bodom (0,0) a koncovým bodom (1,1). Hodnoty x musia zostať medzi 0 a 1, ale hodnoty y môžu ísť mimo tento rozsah a vytvárať efekty preskočenia alebo odrazu.

Ručné doladenie štyroch desatinných čísel tak, aby výsledný pocit nebol ani príliš prudký, ani príliš rozmazaný, si vyžaduje veľa pokusov a omylov. Tento nástroj nahrádza toto hádanie priamou manipuláciou: potiahnite posuvník, sledujte, ako sa krivka ohýba a náhľadová guľôčka podľa toho pohybuje, a skopírujte CSS, keď pohyb pôsobí správne.

Zdroj: CSS Easing Functions Level 1, W3C — špecifikácia definujúca cubic-bezier() a päť pomenovaných kľúčových slov, na ktorých sú založené prednastavenia tohto nástroja.

Prečo ho používať?

• Živý SVG graf presne zobrazuje, ako sa vaša krivka ohýba medzi pevným počiatočným a koncovým bodom, pričom sú pre prehľadnosť nakreslené oba riadiace body aj ich úchyty.
• Tlačidlo prehrávania animuje náhľadový prvok naprieč dráhou pomocou vašej presnej krivky, takže pohyb skutočne pocítite, nielen uvidíte statický graf.
• Prednastavenia jedným kliknutím pre päť štandardných pomenovaných časovacích funkcií — ease, ease-in, ease-out, ease-in-out a linear — ako sú zdokumentované v špecifikácii CSS Easing Functions.
• Hodnoty Y môžu klesnúť pod 0 alebo prekročiť 1, čo umožňuje vytvárať časovania s preskočením/odrazom, ktoré pomenované kľúčové slová nedokážu vyprodukovať.
• Generuje pripravené CSS pre transition-timing-function — rovnaká hodnota funguje aj pre animation-timing-function.
• Beží úplne vo vašom prehliadači — nič, čo nakonfigurujete, sa nikam nenahráva. Zadarmo, bez registrácie.

Ako sa používa

1. Potiahnite posuvníky x1/y1 na nastavenie prvého riadiaceho bodu, ktorý tvaruje, ako animácia začína.
2. Potiahnite posuvníky x2/y2 na nastavenie druhého riadiaceho bodu, ktorý tvaruje, ako animácia končí.
3. Sledujte čiernu krivku na grafe — krivka, ktorá sa na začiatku vydúva nad diagonálu, znamená, že pohyb začína rýchlo, krivka, ktorá zostáva pod ňou, znamená, že pohyb začína pomaly.
4. Kliknite na Prehrať, aby ste videli náhľadový prvok pohybujúci sa naprieč dráhou pomocou vašej krivky ako transition-timing-function.
5. Vyskúšajte prednastavenie (ease, ease-in, ease-out, ease-in-out, linear) ako východiskový bod a odtiaľ posuňte posuvníky.
6. Skopírujte vygenerované CSS a vložte ho do pravidla transition alebo animation.

Prí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 štandardné CSS kľúčové slovo ease vypísané ako explicitné riadiace body — rýchly začiatok, prudké zrýchlenie, potom postupné spomalenie ku koncu.

Prečo hodnoty y môžu presiahnuť 0–1

Na rozdiel od osi x, ktorá predstavuje čas a musí prebiehať od 0 do 1, os y predstavuje priebeh animovanej hodnoty a nemá takéto obmedzenie. Nastavenie y1 pod 0 alebo y2 nad 1 spôsobí, že krivka klesne pod počiatočnú hodnotu alebo prestrelí koncovú hodnotu pred ustálením — základ efektov preskočenia a anticipácie používaných pri stlačeniach tlačidiel, vyskakovaní modálnych okien a hravých mikrointerakciách rozhrania. Žiadne z piatich pomenovaných kľúčových slov (ease, ease-in, ease-out, ease-in-out, linear) toto nedokáže vyprodukovať; na to potrebujete vlastnú cubic-bezier().

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

Hodnota cubic-bezier(), ktorú tento nástroj generuje, funguje identicky v oboch vlastnostiach. Použite transition-timing-function, keď je pohyb spustený zmenou stavu (napríklad hover alebo prepnutie triedy), a animation-timing-function vnútri pravidla animácie riadenej @keyframes, keď potrebujete rovnaký pocit časovania aplikovaný automaticky alebo v slučke.

Bežné vzory časovania

• Svižná spätná väzba rozhrania (tlačidlá, prepínače): udržujte riadiace body blízko diagonály s miernym sklonom k ease-out, napr. cubic-bezier(0.4, 0, 0.2, 1).
• Štandardná krivka Material Design: cubic-bezier(0.4, 0, 0.2, 1) — rýchly začiatok, jemný koniec, široko používané pri prechodoch panelov a kariet.
• Odraz/preskočenie: posuňte y2 nad 1, napr. cubic-bezier(0.34, 1.56, 0.64, 1), pre hravý pocit vyskočenia.
• Anticipácia pred pohybom: posuňte y1 pod 0, aby sa prvok mierne stiahol späť pred pohybom vpred.
• Plynulé ease-in-out pre opakujúce sa animácie: udržujte krivku blízko symetrickú okolo stredu.

Kombinácia s ďalšími CSS nástrojmi

Krivka časovania zriedka stojí samostatne — zvyčajne sa aplikuje na prvok, ktorý potrebuje aj definované tiene, zaoblené rohy alebo gradienty. Vytvorte vizuálny štýl s ostatnými CSS nástrojmi nižšie a potom pridajte časovaciu funkciu z tohto nástroja do rovnakého pravidla alebo deklarácie transition/animation.

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

Časté otázky