Vytvorte Cool CSS Animácie Ľahko s Animista

Existujú ton webových aplikácií animácie CSS online. Ale len veľmi málo v porovnaní s úrovňou detailov a jednoduchosťou používania animist.

Táto bezplatná webová aplikácia vám umožňuje vytvárať vlastné animácie CSS po kliknutí na tlačidlo. Môžete si vybrať medzi vopred navrhnutými pohybmi, ako sú snímky, transformácie, hojdačky a dokonca aj tieňové animácie.

Po vytvorení animácie môžete export kód rovnako ako u iných generátorov CSS. S výnimkou tohto kódu je oveľa jednoduchšie pracovať a dokonca dodáva sa s vstavaným minifierom.

Rozhranie môže byť na prvý pohľad nejasné, ale len kvôli tomu, koľko možností máte!

Vytváraš vlastné animácie po troch hlavných krokoch a pomocou rozhrania zhora nadol:

1. Vyberte štýl pohybu (swing, slide, flip-scale) z kruhov na vrchu
2. Prispôsobte ho rôznym typom pohybu naspodku
3. Upravte možnosti animácie v plávajúcej lište na ľavej strane

Prostredníctvom tohto procesu môžete zmeniť celkovú dĺžku animácie, uvoľňujúci štýl, oneskorenie, skoro všetko. A to všetko pracuje prostredníctvom čistého CSS3, čo je ešte pôsobivejšie.

Tiež si všimnite, že na najvyššej navigačnej lište môžete dokonca vybrať medzi rôznych typov štýlov animovaných cieľov.

je predvolené “basic” ktoré dokážu pracovať na čokoľvek (pohybovať myšou, kliknutím alebo okamžitou animáciou). Medzi ďalšie ciele patrí text stránky, animácie na pozadí a dokonca aj vlastné vstupné animácie aby sa zobrazil skrytý prvok stránky.

Veľmi sa mi páči “pozornosť” odkaz v hornej časti, ktorý má nejaké chladné efekt trepania a chvenia pre štýly tlačidiel. Títo pracujú skvelo na tlačidlách CTA, aby upútali pozornosť a podporovali interakcie používateľov.

Akonáhle dokončíte úpravy, stačí kliknite na ikonu malého držiaka v pravom hornom rohu podokna náhľadu.

Tým sa zobrazí nová stránka celú triedu animácie CSS spolu s kľúčovými snímkami. Voliteľné funkcie vám umožňujú miniatúra kódu a zahrnúť automatické prefixovanie ktorý podporuje staršie webové prehliadače.

Použil som veľa vlastných animačných nástrojov CSS a bezpochyby Animista je nástroj, ktorý je najviac bohatý na funkcie. Je to úplne zadarmo a trochu zložité na prvý, ale akonáhle pochopíte rozhranie, je to zďaleka najlepší generátor môžete použiť.

Ak chcete skúsiť, navštívte domovskú stránku a kliknite na tlačidlo “Vyskúšaj ma”. Môžete tiež zdieľať svoje myšlienky a komplimenty s tvorcom aplikácie webovej aplikácie @ ana108.