Generator CSS keyframes
Konvertujte kroky percent;property:value do bloku @keyframes a skratky animácie.
Generator CSS keyframes
Vložte kroky keyframe ako percent;property:value — jeden riadok na jeden stop, napríklad 0;opacity:0 nasledovaný 100;opacity:1 — a nástroj ich spojí do kompletného bloku @keyframes a zodpovedajúcej skratky animácie. Pridajte na jeden riadok viac párov property:value oddelených bodkočiarkami a animujte naraz niekoľko vlastností, alebo opätovne použite percentá na viacerých riadkoch a pridajte k nim nové vlastnosti.
Vyberte si predvolené nastavenie — vyblednutie, posun, pulz, chvenie alebo odskak — a preskočte ručné zadávanie krokov, alebo prepnite na vlastné a celý priebeh riaďte vlastným vstupom. Zvyšné možnosti tvoria skratku animácie: názov nastavuje identifikátor zdieľaný pravidlom @keyframes a deklaráciou animácie, trvanie a oneskorenie sú v sekundách a funkcia načasovánia obsahuje všetky štandardné kľúčové slová plus vlastnú kubickú bezierku pre presný priebeh easing. Nastavte animáciu na opakovanie pevného počtu krát alebo zapnite nekonečný režim, zvolte smer (normálny, obrátený, striedavý, striedavý obrátený) a režim výplne na to, čo sa stane pred a po jej spustení, a zapnite možnosť webkit predpony na generovanie bloku @-webkit-keyframes a riadku -webkit-animation pre staršie verzie Safari a Android WebView.
Percentiálne hodnoty mimo rozsahu 0–100 sú skrátené, "from" a "to" sú akceptované ako aliasy pre 0 a 100, a prázdne alebo nesprávne riadky sa preskočia namiesto porušenia výstupu. Súčet pod výstupom hlási počet generovaných keyframe stopov a presný počet znakov.
Všetko beží lokálne vo vašom prehliadači priamo keď píšete — CSS alebo údaje o animácii sa nikdy neposielajú na server. Skopírujte výsledok, stiahnite ho ako súbor .txt, alebo pošlite výstup spät do vstupu a pokračujte v zdokonaľovaní krokov.