Stylie - En gratis CSS Web Animation Builder

Hvis du sliter med CSS3 syntaks og vil ha en enkel måte å lage animasjoner på stylie er et flott verktøy for å redde.

Dette er en av mange gratis kode generatorer med fokus på rene CSS animerte effekter. Stylie er helt gratis og åpnes, hostes på GitHub og drevet av et keyframe-bibliotek kalt Rekapi.

Rekapi-biblioteket bruker JavaScript, så det er et alternativ til rent CSS. Og heldigvis støtter Stylie webapps begge metodene, så du kan eksportkode i enten rent CSS eller JavaScript.

Som standard laster den første siden en kontinuerlig animasjonsdemo med en lineær animasjon. Du kan spille med dette ved å redigere standard instillinger i Motion-fanen eller ved å redigere Keyframes-fanen.

I keyframes-listen kan du legg til nye keyframes, rediger deres totale varighet, og endre animasjonsstilene, inkludert bevegelser basert på X / Y-aksen.

Først vil dette se ut ekstremt forvirrende, spesielt hvis du aldri har gjort keyframe-animasjon før. Men jo mer du spiller med dette programmet, desto mer er det fornuftig.

Som standard har du massevis av forskjellige lette alternativer å rote med og de er alle super enkle å tilpasse.

De Bevegelsediagram er mye tøffere å lære, men det gir deg langt mer kontroll over animasjonslempingen. Stylie lar deg selv lagre tilpassede bevegelseseffekter og gjenbruk disse i Keyframes-kategorien for andre animasjoner.

Hvis jeg kunne klage på en ting, er det webappsens mangel på responsiv design.

Jeg kunne ikke få hele appen til å passe på min 13-tommers MacBook Pro-skjerm, selv om nettleseren er fullt maksimert. Dette kan være et problem siden siden ikke har en vertikal rulleknapp, og mange av alternativene (som eksportert kode) er funnet lavere i innstillingsruten.

Men bortsett fra denne mindre irritasjonen, fikk jeg det til å fungere helt fint på min større skjerm. Og eksportkvalitet er som ingenting annet du finner på nettet.

Ta en titt på Stylie-appen for å se hvordan det fungerer, og prøv å fitte med noen av alternativene. Når du gjør animasjonen, kan du eksporter CSS eller JavaScript og bruk det for ethvert prosjekt du liker.

Hvis du har problemer med å lære grensesnittet, kan du også se denne korte opplæringen som strekker seg om 9 minutter lang og dekker alle de viktigste funksjonene.