Generator CSS keyframes
Převeďte kroky percent;property:value do bloku @keyframes a zkratky animace.
Generator CSS keyframes
Vložte kroky keyframe jako percent;property:value — jeden řádek na jeden stop, například 0;opacity:0 následovaný 100;opacity:1 — a nástroj je spojí do kompletního bloku @keyframes a odpovídajícího zkratky animace. Přidejte na jeden řádek více párů property:value oddělených středníky a animujte najednou několik vlastností, nebo znovu použijte procenta na více řádcích a přidejte k nim nové vlastnosti.
Vyberte si předvolení — vyblednutí, posun, puls, třes nebo odraz — a přeskočte ruční zadávání kroků, nebo přepněte na vlastní a řídí celý proces svým vstupem. Zbývající možnosti tvoří zkratku animace: název nastavuje identifikátor sdílený pravidlem @keyframes a deklarací animace, trvání a zpoždění jsou v sekundách a funkce časování obsahuje všechna standardní klíčová slova plus vlastní kubickou bezierku pro přesný průběh easing. Nastavte animaci na opakování pevného počtu krát nebo zapněte režim nekonečna, vyberte směr (normální, obrácený, střídavý, střídavě obrácený) a režim vyplnění na to, co se stane před a po jejím spuštění, a zapněte možnost webkit předpony na generování bloku @-webkit-keyframes a řádku -webkit-animation pro starší verze Safari a Android WebView.
Procentuální hodnoty mimo rozsah 0–100 jsou zkráceny, "from" a "to" jsou přijímány jako aliasy pro 0 a 100, a prázdné nebo nesprávné řádky se přeskočí místo porušení výstupu. Součet pod výstupem hlásí počet generovaných keyframe stopů a přesný počet znaků.
Všechno běží lokálně ve vašem prohlížeči přímo když píšete — CSS nebo údaje o animaci se nikdy neposílají na server. Zkopírujte výsledek, stáhněte si ho jako soubor .txt, nebo pošlete výstup zpět do vstupu a pokračujte v zdokonalování kroků.