Stylie - Ingyenes CSS Web Animation Builder

Ha a CSS3 szintaxisával küzd, és szeretnéd a egyszerű módja az animációk létrehozásának Stylie egy nagyszerű eszköz a mentésre.

Ez az egyik a sok ingyenes kódgenerátorok a tiszta CSS animált hatásokra összpontosítva. A Stylie teljesen ingyenes és nyílt forráskódú, a GitHub-on tárolt, és egy kulcsfontosságú Rekapi.

A Rekapi könyvtár használja a JavaScript-et, így a tiszta CSS alternatívája. Szerencsére a Stylie webalkalmazás mindkét módszert támogatja, így lehet export kódot a tiszta CSS-ben vagy a JavaScript-ben.

Alapértelmezés szerint az első oldal egy folyamatos animációs demót tölt be lineáris animációval. Játszhatsz ezzel a szerkesztéssel alapbeállítások ban,-ben Mozgás fül vagy a Kulcskeretek lap.

A kulcskeretek listáján lehet új kulcskeret hozzáadása, a teljes időtartam szerkesztése, és módosítsa az animációs stílusokat, beleértve az X / Y tengelyen alapuló mozgásokat.

Először is ez fog kinézni rendkívül zavaró, különösen, ha még soha nem tettél kulcsfontosságú animációt. Minél többet játszol ezzel az alkalmazással, annál több értelme van.

Alapértelmezés szerint egy tonna van különböző könnyítő lehetőségek a rendetlenség és mindegyik szuper könnyű testreszabható.

A Mozgási grafikon sokkal nehezebb megtanulni, de sokkal jobban irányíthatja az animáció megkönnyítését. Stylie is elenged az egyéni mozgáshatások mentése és ezeket újra használni más animációkhoz tartozó Keyframes fülön.

Ha panaszkodnék egy dologról, az a webes alkalmazás az érzékeny tervezés hiánya.

Nem tudtam, hogy az egész alkalmazás elférjen a 13 "MacBook Pro képernyőn a böngésző teljesen maximalizálva. Ez problémát jelenthet, mivel az oldalon nincs függőleges görgetősáv, és sok lehetőség (például exportált kód) található alacsonyabb a beállításablakban.

De a kisebb bosszúságon kívül csak a nagyobb monitoromon dolgoztam. És a exportminőség olyan, mint bármi más, amit az interneten talál.

Tekintse meg a Stylie alkalmazást, hogy megtudja, hogyan működik, és próbáljon megcsinálni néhány opcióval. Amint elkészíted az animációt, meg tudod csinálni exportálja a CSS-t vagy a JavaScript-et és használja azt bármely tetszőleges projekthez.

Ha problémái vannak az interfész megismerésével, akkor megtekintheti ezt a rövid bemutatót is, amely körülbelül 9 percig terjed, és kiterjed az összes főbb jellemzőre.