Stylie - volný CSS web animační stavitel

Pokud bojujete se syntaxí CSS3 a chcete jednoduchý způsob vytváření animací Stylie je skvělý nástroj pro uložení.

To je jeden z mnoha svobodných generátory kódů se zaměřením na čisté CSS animované efekty. Stylie je naprosto svobodný a otevřený, hostuje se na GitHubu a je poháněn knihovnou klíčových snímků nazvanou Rekapi..

Knihovna Rekapi používá JavaScript, takže je to alternativa k čistému CSS. A naštěstí webová aplikace Stylie podporuje obě metody, takže můžete exportovat kód v čistém CSS nebo JavaScriptu.

Ve výchozím nastavení na první stránce načte průběžné demo animace s lineární animací. Můžete s tím hrát úpravou Výchozí nastavení v Karta Pohyb nebo úpravou Karta Klíčové snímky.

V seznamu klíčových snímků můžete přidat nové klíčové snímky, upravit jejich celkové trvání, a změnit styly animace, včetně pohybů založených na ose X / Y.

Za prvé, bude to vypadat velmi matoucí, zejména pokud jste nikdy předtím neudělali animaci klíčových snímků. Čím více hrajete s touto aplikací, tím více to dává smysl.

Ve výchozím nastavení budete mít tunu různé možnosti uvolnění s nepořádkem a jsou všechny super snadné přizpůsobit.

Graf pohybu je mnohem těžší se učit, ale dává vám mnohem větší kontrolu nad uvolněním animace. Stylie vám dokonce umožňuje uložit vlastní efekty pohybu a znovu použít na kartě Klíčové snímky pro jiné animace.

Pokud bych si mohl stěžovat na jednu věc, je to webová aplikace nedostatek citlivého designu.

Nemohl jsem se dostat celou aplikaci, aby se vešly na mé 13 "MacBook Pro obrazovce, i když prohlížeč plně maximalizován. To může být problém, protože stránka nemá svislý posuvník a mnoho možností (jako je exportovaný kód) jsou nalezeny níže v podokně nastavení.

Ale kromě této drobné mrzutosti jsem na svém větším monitoru pracovala v pořádku. A kvality vývozu je jako nic jiného, ​​co najdete na webu.

Podívejte se na aplikaci Stylie, abyste zjistili, jak funguje a zkuste si s některými možnostmi hrát. Jakmile uděláte animaci, můžete exportovat CSS nebo JavaScript a použít pro jakýkoli projekt, který se vám líbí.

Pokud máte potíže s učením rozhraní, můžete také sledovat tento stručný návod o délce přibližně 9 minut a pokrývat všechny hlavní funkce.