Generátor CSS keyframe animací
Vytvářejte skutečné @keyframes animace na časové ose s více stopami – zarážky transformace, opacity a barvy pozadí pro každou stopu – s posuvnou zarážkou, která ukazuje přesný interpolovaný stav uprostřed animace.
🔒 Zpracováno výhradně ve vašem prohlížeči – nic, co zde zadáte, se nikdy nenahraje.
Výsledek
Pravidlo CSS @keyframes je vlastně malá časová osa: sada procentuálních záchytných bodů, kde každý deklaruje, jak má daná vlastnost v daném okamžiku vypadat, a prohlížeč mezi nimi interpoluje. Ruční tvorba znamená držet v hlavě několik těchto procentuálních záchytných bodů napříč více vlastnostmi – tento generátor promění tuto časovou osu v něco, co skutečně vidíte a čím můžete pohybovat: jednu vodorovnou dráhu pro každou vlastnost, se značkou zarážky na každém záchytném bodě.
Srdcem je posuvná zarážka náhledu. Přetáhněte ji do libovolného bodu mezi 0 % a 100 % a náhledové pole okamžitě přejde do přesného složeného stavu v tomto okamžiku – ne do nejbližšího klíčového snímku, ale do skutečné lineárně interpolované hodnoty spočítané mezi zarážkami, které zarážku obklopují na každé aktivní stopě. Číselné vlastnosti, jako poloha, rotace a měřítko, interpolují jako prostá čísla; barva pozadí interpoluje každý červený, zelený a modrý kanál nezávisle, což způsobuje plynulé prolínání odstínů namísto přeskakování mezi vámi nastavenými barvami.
Více stop se automaticky slučuje do jedné souvislé animace: všechny vlastnosti založené na transformaci (posun, rotace, škálování) se spojují do jedné deklarace transform na každém procentu klíčového snímku, zatímco opacity a barva pozadí zůstávají na vlastních řádcích – přesně tak, jak by vypadalo ručně psané CSS. Procenta, kde daná stopa nemá explicitní zarážku, jsou z deklarací vlastnosti záměrně vynechána – vlastní interpolace prohlížeče mezi klíčovými snímky vyplní mezeru mezi existujícími zarážkami, stejně jako u jakéhokoli ručně psaného @keyframes pravidla.
Pět předvoleb – odraz, třesení, pulzování, zprůhlednění, najetí – načte jedním kliknutím kompletní časovou osu připravenou k úpravám (včetně rozumného trvání, časové funkce a počtu opakování). Kdykoli stiskněte Přehrát a na náhledovém prvku se spustí skutečná CSS animace, generovaná za běhu pomocí dynamicky vloženého stylopisu. Poté zkopírujte celý @keyframes blok spolu se zkráceným zápisem .animated-element { animation: ... } přímo do svého projektu. Jako všechny nástroje na tomto webu i tento běží lokálně v prohlížeči a nic se nikam nenahrává.