Stylie - tasuta CSS-i veebi-animatsiooni ehitaja

Kui sa võitled CSS3 süntaksiga ja tahad a lihtne viis animatsioonide loomiseks Stylie on suurepärane vahend salvestamiseks.

See on üks paljudest tasuta koodigeneraatorid keskendudes puhtale CSS-i animeeritud efektile. Stylie on täiesti tasuta ja avatud lähtekoodiga, GitHubis majutatud ja seda toetab võtmefailiraamatukogu, Rekapi.

Rekapi raamatukogu kasutab JavaScripti, nii et see on alternatiiv puhtale CSS-ile. Ja õnneks toetab Stylie veebirakendus mõlemat meetodit, nii et saate ekspordikood kas puhas CSS või JavaScript.

Vaikimisi laaditakse esimesel lehel lineaarse animatsiooniga pidev animatsioon demo. Seda saab mängida vaikeseaded Euroopa Liikumine sakk või Klaviatuuride vahekaart.

Võimalik on võtmefailide loendis lisage uusi võtmefaile, muuta nende kogu kestust, ja muutke animatsioonistiile, sealhulgas X / Y-teljel põhinevad liikumised.

Esiteks näeb see välja väga segane, eriti kui sa pole kunagi võtmekeha animatsiooni varem teinud. Kuid mida rohkem seda rakendust mängid, seda rohkem on see mõistlik.

Vaikimisi on teil tonni erinevaid leevendusvõimalusi segadusse ja nad kõik on väga lihtne kohandada.

The Liikumisgraafik on palju raskem õppida, kuid see annab teile palju rohkem kontrolli oma animatsiooni leevendamise üle. Stylie lubab sulle isegi salvestage kohandatud liikumisefekte ja neid uuesti kasutada teiste animatsioonide vahekaardil Keyframes.

Kui ma saaksin ühe asja peale kaebada, on see veebirakenduses tundliku disaini puudumine.

Ma ei saanud kogu rakendust, et see sobiks minu 13-tollise MacBook Pro ekraaniga isegi brauseri täieliku maksimeerimise korral. See võib olla probleem, kuna lehel ei ole vertikaalset kerimisriba ja paljud võimalused (näiteks eksporditud kood) on leitud madalam seadete paneelil.

Kuid selle väikese pahameele kõrvale, sain selle oma suurema monitoriga hästi. Ja ekspordi kvaliteet on nagu midagi muud, mida veebis leiad.

Tutvuge Stylie'i rakendusega, et näha, kuidas see toimib, ja proovige mõningate võimalustega hakkama saada. Kui olete oma animatsiooni teinud, saate seda teha eksportige CSS või JavaScript ja kasutage seda iga soovitud projekti jaoks.

Kui teil on probleeme liidese õppimisega, saate vaadata ka seda lühikest juhendit, mis kestab umbes 9 minutit ja katab kõik peamised funktsioonid.