Generátor easing CSS
Bezplatný online generátor easing CSS. Přetahujte kontrolní body cubic-bezier na interaktivní křivce, vyberte si z 18 předvoleb, sledujte smyčkovou animaci koule a okamžitě zkopírujte časovací funkci.
Co je easing funkce v CSS?
Easing funkce řídí tempo, jakým animace nebo přechod postupuje v čase. Prvek nemusí se pohybovat stálou rychlostí: může startovat pomalu, zrychlovat, přestřelit cíl a pak se usadit. V CSS se nastavuje vlastností transition-timing-function nebo animation-timing-function.
Co znamenají čtyři čísla v cubic-bezier()?
cubic-bezier(x1, y1, x2, y2) definuje křivku pomocí dvou řídících bodů. První bod utváří začátek pohybu, druhý jeho konec. X představuje čas na škále od 0 do 1, Y představuje postup: 0 je počáteční hodnota, 1 koncová.
Proč může Y být mimo rozsah 0 až 1, ale X ne?
X se mapuje na reálný čas, takže hodnota pod 0 nebo nad 1 by porušila kauzalitu a specifikace to zakazuje. Y je volné: nad 1 se přestřeluje cíl, pod 0 se nejdřív ustoupí — tak předvolby Back vytvářejí pocit odrazu.
Jaký je rozdíl mezi ease, ease-in a ease-out?
ease je výchozí hodnota prohlížeče s jemným startem a jemným dopadem; ease-in startuje pomalu a končí rychle; ease-out startuje rychle a zpomaluje; ease-in-out kombinuje obojí. Generátor dále obsahuje předvolby sine, quad, cubic, quart, expo, back a material — celkem 18.
Jak funguje náhled s koulí?
Dvě koule cyklicky běží po dobu, kterou nastavíte. Horní koule se pohybuje vždy lineární funkcí jako reference, dolní sleduje vaši křivku. Rostoucí a klesající mezera mezi nimi přesně ukazuje, co váš easing mění.
Kam vložit vygenerovanou hodnotu?
Použijte ji jako hodnotu transition-timing-function nebo animation-timing-function, například transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);. Nástroj vrací holou funkci cubic-bezier(...), připravenou pro jakékoli pravidlo.
Ovlivňuje easing funkce výkon animace?
Samotná časovací funkce je zdarma: jen přemapovává postup v čase. Výkon závisí na tom, které vlastnosti animujete: transform a opacity jsou GPU přátelské, zatímco animace vlastností rozvržení jako width nebo top vyvolává drahé reflow bez ohledu na easing.
Lze vytvořit skutečný efekt odrazu nebo pružnosti?
Jediná cubic-bezier může cíl jednou přestřelit, ale nevytvoří mnohonásobné odrazy pravého bounce nebo pružného easing. K tomu zřetězte více klíčových snímků v @keyframes nebo použijte Web Animations API; jediné hladké přestřelení je přesně to, co cubic-bezier umí skvěle a co tento nástroj nabízí.
Nahrává se to, co zde dělám, někam?
Ne. Křivka se kreslí na lokální canvas a náhledová animace běží zcela ve vašem prohlížeči. Na server se neposílá nic, takže generátor funguje i offline po načtení stránky.
Jak používat Generátor easing CSS
Modelujte easingové křivky CSS vizuálně místo hádání čísel. Přetahujte řídicí body, srovnejte svůj pohyb s lineárním vzorem a zkopírujte hotové cubic-bezier jedním kliknutím. Vše běží lokálně ve vašem prohlížeči.
- Vyberte jeden z 18 presetů jako výchozí bod, například Ease Out, Expo Out nebo Back Out.
- Přetahujte obě držadla na křivce: osa X je čas a musí zůstat mezi 0 a 1, osa Y je postup a může přesáhnout.
- Dolaďte přesné souřadnice P1 a P2 číselnými poli, pokud potřebujete přesnost.
- Nastavte posuvník délky trvání a sledujte dvě smyčkové kuličky — dutá je vždy lineární, plná používá vaši křivku.
- Zkopírujte vygenerovanou hodnotu cubic-bezier do transition-timing-function nebo animation-timing-function.
Vytlačte držadlo Y nad 1 pro sebevědomé přestřelení, například cubic-bezier(0.34, 1.56, 0.64, 1) — tlačítka a karty působí pružně bez jediného klíčového snímku.
Související nástroje
- Generátor CSS gradientů Vytvářejte úžasné CSS gradienty vizuálně. Generujte lineární, radiální a kuželové gradienty s více barevnými zastávkami, úhly a pozicemi. Okamžitě zkopírujte produkčně připravený CSS kód.
- Generátor CSS loaderů Bezplatný generátor CSS loaderů: deset načítacích spinnerů v čistém CSS s živou regulací velikosti, rychlosti, tloušťky a barvy a hotovými HTML a CSS ke zkopírování.
- Generátor border-radius Bezplatný kreativní generátor border-radius online. Tažením 8 úchopů nebo výběrem tvaru blob vytvoříte organické CSS tvary a okamžitě zkopírujete kód.
- Převodník barev Bezplatný online převodník barev. Okamžitý převod formátů HEX, RGB, HSL, HSV s vizuálním výběrem. 100% soukromí, běží ve vašem prohlížeči.
- Generátor text-shadow CSS Bezplatný online generátor text-shadow CSS. Vrstvte více stínů s posunem, rozostřením, barvou a neprůhledností, vyzkoušejte předvolby Neon, 3D, Retro a okamžitě zkopírujte CSS.
- Generátor CSS clip-path Bezplatný online generátor CSS clip-path. Navrhujte tvary polygon, circle, ellipse a inset s tažitelnými body, živým náhledem a zkopírováním kódu CSS na jedno kliknutí.
- CSS zkrášlovač Formátujte a zkrášlujte CSS kód okamžitě. Převeďte minifikovaný CSS na čitelný kód s přizpůsobitelnými možnostmi.
- CSS Minifikátor Bezplatný online CSS minifikátor. Okamžitě komprimujte a optimalizujte CSS kód odstraněním mezer, komentářů a zbytečných znaků. Zmenšete velikost souboru pro rychlejší výkon webu.