Generátor CSS keyframe animácií so živým náhľadom
Generátor CSS keyframe animácií vytvorí blok @keyframes a zodpovedajúcu skratku animation z vybranej vlastnosti a nastavení animácie. Vyberte translate, rotate, scale, opacity alebo background, potom zadajte počiatočné a koncové hodnoty, trvanie, časovanie a počet opakovaní. Živý náhľad zobrazuje animáciu počas úpravy nastavení a vygenerované hodnoty môžete skopírovať.
Generátor CSS keyframe animácií vytvorí blok @keyframes a skratku animation z nastavení, ktoré zvolíte. Vyberte translate, rotate, scale, opacity alebo background ako animovanú vlastnosť, zadajte počiatočné a koncové hodnoty a nastavte trvanie, časovanie a počet opakovaní. Živý náhľad vám ukáže výslednú animáciu počas práce.
Prevod použije tieto nastavenia na napísanie definície keyframes a zodpovedajúcej skratky animation. Vybraná vlastnosť určuje, čo sa mení medzi počiatočnou a koncovou hodnotou; trvanie, časovanie a počet opakovaní formujú priebeh animácie. Vygenerované hodnoty, ktoré potrebujete pre svoje CSS, môžete skopírovať.
CSS keyframes popisujú zmeny medzi stavmi animácie, zatiaľ čo skratka animation spája nastavenia animácie do jednej deklarácie. Vygenerovanie oboch pomôže pri prototypovaní pohybu, príprave testovacích dát alebo pridávaní animácie do stylesheetu. Náhľad poskytuje rýchly spôsob, ako skontrolovať výsledok pred skopírovaním kódu.
Nástroj funguje úplne vo vašom prehliadači. Váš vstup sa spracuje na vašom zariadení a neodosiela sa na server. Funguje offline po načítaní stránky, takže ho môžete ďalej používať bez pripojenia; nástroj je zadarmo.
Tento generátor je užitočný pre vývojárov na akejkoľvek úrovni skúseností, ktorí chcú vytvoriť alebo ukázať náhľad hodnôt CSS animácie. Môže pomôcť aj DevOps inžinierom a tímom, ktoré pripravujú fixture alebo seed dáta obsahujúce kód keyframe animácií.
Krok 1: Vyberte vlastnosť animácie: translate, rotate, scale, opacity alebo background. Tá určuje, akú zmenu budú vygenerované keyframes popisovať.
Krok 2: Nastavte počiatočné a koncové hodnoty pre vybranú vlastnosť. Tieto hodnoty definujú počiatočný a koncový stav animácie.
Krok 3: Vyberte trvanie, časovanie a počet opakovaní. Vygenerovaná skratka animation odráža tieto nastavenia.
Krok 4: Vygenerujte CSS a skontrolujte živý náhľad, aby ste videli výsledok.
Krok 5: Skopírujte blok @keyframes, skratku animation alebo ľubovoľné vygenerované hodnoty, ktoré potrebujete.
Prípad použitia: Vytvorte pripravené hodnoty keyframe animácií pre testy, fixture alebo seed dáta a skopírujte vygenerované CSS do svojho projektu.
Prípad použitia: Vygenerujte naraz celú dávku hodnôt animácií namiesto ručného vymýšľania hodnôt.
Prípad použitia: Získajte správne náhodné hodnoty namiesto spoliehania sa na odhady písané na klávesnici.
Prípad použitia: Ukážte si náhľad CSS animácie počas výberu vlastnosti a počiatočných a koncových hodnôt, aby ste skontrolovali výsledok pred skopírovaním kódu.
Prípad použitia: Zostavte blok @keyframes a skratku animation pre prototyp používateľského rozhrania bez písania oboch častí od nuly.
Prípad použitia: Pripravte kód animácie pre stylesheet vygenerovaním keyframes a skratky naraz.