Stylie - Free CSS Web Animation Builder

Ak bojujete s syntaxou CSS3 a chcete a jednoduchý spôsob vytvárania animácií Stylite je skvelý nástroj na záchranu.

To je jeden z mnohých zadarmo generátory kódov so zameraním na čisté animované efekty CSS. Stylie je úplne zadarmo a otvorený zdroj, hosťovaný na GitHub a poháňaný knižnicou kľúčových snímok s názvom Rekapi.

Knižnica Rekapi používa JavaScript, takže je to alternatíva k čistému CSS. A našťastie webová aplikácia Stylie podporuje obe metódy, takže môžete exportný kód v čistom CSS alebo JavaScript.

Štandardne prvá stránka načíta kontinuálne animačné demo s lineárnou animáciou. S týmto môžete hrať úpravou predvolené nastavenia v Karta Pohyb alebo úpravou Karta kľúčových snímok.

V zozname kľúčových snímok môžete pridať nové kľúčové snímky, upraviť ich celkovú dĺžku trvania, a zmeniť štýly animácie, vrátane pohybov založených na osi X / Y.

Po prvé to bude vyzerať veľmi mätúce, najmä ak ste nikdy predtým neurobili animáciu kľúčových snímok. Čím viac budete hrať s touto aplikáciou, tým viac to dáva zmysel.

Štandardne budete mať tonu rôzne možnosti uvoľnenia aby sa zablúdil a všetci sa veľmi ľahko prispôsobiť.

Graf pohybu je oveľa ťažšie sa naučiť, ale dáva vám oveľa väčšiu kontrolu nad uvoľnením animácie. Stylie vás dokonca dovolí uložte efekty vlastného pohybu a znovu použiť na karte Kľúčové snímky pre iné animácie.

Keby som si mohol sťažovať na jednu vec, je to webová aplikácia nedostatok citlivého dizajnu.

Nemohol som dostať celú aplikáciu, aby sa zmestili na mojej 13 "obrazovke MacBook Pro, a to aj pri maximálnom maximalizovaní prehliadača. Môže to byť problém, pretože stránka nemá vertikálnu posuvnú lištu a mnohé z možností (napríklad exportovaný kód) nižšie v paneli s nastaveniami.

Ale okrem tejto menšej nepríjemnosti som sa na mojom väčšom monitore pokúsil dobre. A exportovať kvalitu je ako nič iné nájdete na webe.

Pozrite sa na aplikáciu Stylie, aby ste videli, ako to funguje, a vyskúšajte si niekoľko možností. Akonáhle urobíte svoju animáciu, môžete export CSS alebo JavaScript a použiť to pre akýkoľvek projekt, ktorý sa vám páči.

Ak máte problémy s naučením rozhrania, môžete si pozrieť aj tento stručný návod, ktorý trvá približne 9 minút a zahŕňa všetky hlavné funkcie.