Stylie - brezplačna spletna animacija CSS

Če se borite s sintakso CSS3 in želite a preprosto ustvarjanje animacij Stylie je odlično orodje za shranjevanje.

To je ena izmed mnogih svobodnih generatorji kod s poudarkom na čistih animiranih učinkih CSS. Stylie je popolnoma brezplačen in odprt, gostuje se na GitHubu in ga poganja knjižnica s ključnimi okviri, imenovano Rekapi.

Knjižnica Rekapi uporablja JavaScript, zato je alternativa čistemu CSS. In na srečo, spletna aplikacija Stylie podpira obe metodi, tako da lahko izvozno kodo v čisti CSS ali JavaScript.

Prva stran privzeto naloži stalno predstavitev animacije z linearno animacijo. S tem lahko igrate tako, da urejate privzete nastavitve v Zavihek Motion ali z urejanjem Jeziček ključnih ključev.

Na seznamu ključnih slik lahko dodajte nove ključne sličice, uredite njihovo skupno trajanje, in spremenite sloge animacije, vključno z gibi na osi X / Y.

Najprej bo to videti zelo zmedeno, še posebej, če še nikoli niste opravili animacije. Vendar, bolj ko se igrate s to aplikacijo, bolj je smiselna.

Privzeto boste imeli tono različne možnosti popuščanja da bi se zmešali in vsi so zelo enostavno prilagoditi.

The Graf gibanja je veliko težje za učenje, vendar vam daje veliko več nadzora nad sproščanjem animacije. Stylie vam celo dovoli shranite učinke gibanja po meri in jih ponovno uporabite v zavihku »Ključni kadri« za druge animacije.

Če bi se lahko pritožil zaradi ene stvari, je spletna aplikacija pomanjkanje odzivnega oblikovanja.

Ne morem dobiti celotne aplikacije, da se prilega mojemu 13-palčnemu zaslonu MacBook Pro, tudi če je brskalnik popolnoma povečan. To je lahko problem, saj stran nima navpičnega drsnega traku in mnoge možnosti (kot je izvožena koda) so najdene v podoknu nastavitev.

Ampak poleg tega manjše motnje, sem dobil, da delajo v redu na moji večji monitor. In kakovosti izvoza je kot nič drugega, kar boste našli na spletu.

Oglejte si aplikacijo Stylie in si oglejte, kako deluje in poskusite z nekaterimi možnostmi. Ko naredite svojo animacijo, lahko izvozite CSS ali JavaScript in jo uporabite za vsak projekt, ki ga želite.

Če imate težave pri učenju vmesnika, si lahko ogledate tudi ta kratek vodnik, ki traja približno 9 minut in zajema vse glavne funkcije.