Generátor CSS animací a přechodů
Vytvořte pravidlo CSS přechodu z přednastavených křivek nebo vlastních bodů cubic-bezier s textovým grafem pohybu.
Generátor CSS animací a přechodů
Vyberte vlastnosti, které chcete animovat, nastavte dobu trvání a zpoždění, a tento nástroj vám napíše pravidlo přechodu — jako čistý CSS nebo jako konfigurační blok Tailwind, který můžete vložit přímo do tailwind.config.js. Nástroj pokrývá běžné pojmenované křivky (linear, ease, ease-in, ease-out, ease-in-out) plus ease-out-back, křivku, která se přesahuje mimo svůj cíl před ustalením, což není nativní CSS klíčové slovo a vždy musí být zapsáno jako úplná funkce cubic-bezier().
Pod vygenerovaným pravidlem je textový graf, který vykresluje pokrok křivky v každém bodě v čase — od 0 na začátku animace do 1 na konci, s pruhem pro každý vzorek, takže vidíte zrychlení a jakýkoli přesah bez otevírání vývojářských nástrojů. Přepněte na "Vlastní cubic-bezier()" a zadejte své vlastní čtyři kontrolní body pro náhled křivky, kterou vám někdo dal, nebo kterou jste zkopírovali z designového nástroje; první a třetí bod musí zůstat v rozsahu 0–1 na ose času (to je požadavek CSS), ale hodnoty y se mohou posunout mimo rozsah 0–1, což je právě to, jak fungují animace bounce a back.
Pole vlastnosti přijímá seznam oddělený čárkou — transform, opacity, background-color nebo vlastnost CSS jako --panel-width — a nástroj napíše jeden řádek na vlastnost, aby bylo pravidlo snadné číst. Trvání a zpoždění jsou v milisekundách; počet řádků grafu je nastavitelný od 2 do 41 pro hrubší nebo jemnější pohled na křivku.
Všechno běží lokálně ve vašem prohlížeči: nic, co napíšete, se nekopíruje nikam. Zkopírujte výsledek, stáhněte jej jako soubor .txt nebo pošlete výstup přímo zpět do vstupu pro další úpravy.