Pagina principala » Setul de instrumente » Stylie - Un CSS gratuit ce builder de animație Web

    Stylie - Un CSS gratuit ce builder de animație Web

    Dacă te lupți cu sintaxa CSS3 și vrei a mod simplu de a crea animații Stylie este un instrument excelent pentru salvare.

    Aceasta este una dintre multele liberi codificatori cu accent pe efectele animate pure CSS. Stylie este total gratuită și deschisă, găzduită pe GitHub și alimentată de o bibliotecă de chei numită Rekapi.

    Biblioteca Rekapi folosește JavaScript, deci este o alternativă la CSS pură. Și, din fericire, aplicația web Stylie acceptă ambele metode, astfel încât să puteți codul de export fie în CSS pur sau în JavaScript.

    Implicit, prima pagină încarcă o demo de animație continuă cu o animație liniară. Puteți juca cu acest lucru prin editarea setări implicite în Fila de mișcare sau prin editarea Fila cheie de cadre.

    În lista de cadre cheie, puteți adăugați cadre cheie noi, modificați durata lor totală, și modificați stilurile de animație, inclusiv mișcările bazate pe axa X / Y.

    În primul rând, acest lucru va arăta extrem de confuz, mai ales dacă nu ați făcut niciodată animație de cadre cheie. Cu toate acestea, cu cât jucați mai mult cu această aplicație cu cât are mai mult sens.

    În mod implicit, veți avea o tonă de diferite opțiuni de relaxare pentru a vă mizeria și toate acestea sunt foarte ușor de personalizat.

    Graficul de mișcare este mult mai dificil de învățat, dar vă oferă mult mai mult control asupra relaxării animației. Stylie vă permite chiar salvați efectele de mișcare particularizate și reutilizați-le în fila Keyframe pentru alte animații.

    Dacă aș putea să vă plâng de un lucru, e aplicația web lipsa unui design receptiv.

    Nu am putut obține întreaga aplicație să se potrivească ecranului meu 13 "MacBook Pro, chiar dacă browser-ul a fost maximizat. Acest lucru poate fi o problemă deoarece pagina nu are o bară verticală de derulare și multe dintre opțiuni (cum ar fi codul exportat) mai jos în panoul de setări.

    Dar în afară de această minuțiozitate minore, am reușit să lucrez foarte bine pe monitorul meu mai mare. Si export de calitate este ca și altceva pe care îl veți găsi pe web.

    Luați o privire la aplicația Stylie pentru a vedea cum funcționează și pentru a încerca să faceți niște opțiuni. După ce faceți animația, puteți exportați CSS sau JavaScript și să o utilizați pentru orice proiect care vă place.

    Dacă întâmpinați dificultăți în învățarea interfeței, puteți viziona și acest tutorial, care durează aproximativ 9 minute și acoperă toate caracteristicile majore.