Stylie - Nemokama CSS Web Animation Builder

Jei kovojate su CSS3 sintakse ir norite a paprastas būdas kurti animacijas Stylie yra puiki priemonė taupyti.

Tai vienas iš daugelio nemokamų kodų generatoriai daugiausia dėmesio skiriama gryniems CSS animuotiems efektams. „Stylie“ yra visiškai nemokama ir atvira, ji talpinama „GitHub“..

Rekapi biblioteka naudoja „JavaScript“, todėl tai yra gryno CSS alternatyva. Laimei, „Stylie“ žiniatinklio programa palaiko abu metodus, todėl galite eksportuoti kodą gryname CSS arba „JavaScript“.

Pagal nutylėjimą, pirmasis puslapis įkelia nuolatinį animacijos demonstraciją su linijine animacija. Su tuo galite žaisti redaguodami Numatytieji nustatymai viduje konors Judėjimo skirtukas arba redaguodami Klavišų klavišai.

Raktų rėmelių sąraše galite pridėti naujų raktų rėmelių, redaguoti jų bendrą trukmę, ir keisti animacijos stilius, įskaitant judesius pagal X / Y ašį.

Pirma, tai atrodys labai paini, ypač jei anksčiau niekada nepadarėte pagrindinio rėmelio animacijos. Tačiau kuo daugiau žaidi su šia programa, tuo daugiau prasmės.

Pagal nutylėjimą turėsite toną skirtingų lengvinimo galimybių su jais susieti ir jie visi yra labai lengvai pritaikomi.

The Judėjimo grafikas yra daug sunkiau išmokti, bet suteikia jums daug daugiau galimybių kontroliuoti savo animaciją. Stylie netgi leidžia jums išsaugokite pasirinktinius judesio efektus ir pakartotinai jas naudoti kitų animacijų skirtuke „Keyframes“.

Jei galėčiau skųstis dėl vieno dalyko, tai yra žiniatinklio programos nepakankamas dizainas.

Aš negalėjau gauti visos programos, kad tilptų į mano 13 colių „MacBook Pro“ ekraną, net jei naršyklė visiškai maksimaliai padidinta. Tai gali būti problema, nes puslapyje nėra vertikalios slinkties juostos ir daugelis parinkčių (pvz., Eksportuotas kodas) mažesnis nustatymų srityje.

Tačiau, nepaisant šio nedidelio erzinimo, aš jį dirbu tik dėl savo didesnio monitoriaus. Ir eksporto kokybė yra kaip niekas kitas, kurį rasite internete.

Pažvelkite į „Stylie“ programą, kad pamatytumėte, kaip ji veikia, ir pabandykite nuvilti su kai kuriomis parinktimis. Kai padarysite animaciją, galite eksportuoti CSS arba „JavaScript“ ir naudokite jį bet kuriam norimam projektui.

Jei kyla problemų mokantis sąsajos, taip pat galite žiūrėti šį trumpą pamoką, apimančią apie 9 minutes ir apimančias visas pagrindines funkcijas.