Stylie - En gratis CSS Web Animation Builder
Hvis du kæmper med CSS3 syntaks og vil have en enkel måde at skabe animationer på Stylie er et godt værktøj til at redde.
Dette er en af mange gratis kode generatorer med fokus på rene CSS animerede effekter. Stylie er helt gratis og open-source, hostet på GitHub og drevet af et keyframe bibliotek kaldet Rekapi.
Rekapi biblioteket bruger JavaScript, så det er et alternativ til ren CSS. Og heldigvis understøtter Stylie webapps begge metoder, så du kan eksportkode i enten ren CSS eller JavaScript.
Som standard indlæser den første side en kontinuerlig animationsdemo med en lineær animation. Du kan spille med dette ved at redigere standardindstillinger i Fanen Film eller ved at redigere Fanen Keyframes.
I keyframes listen kan du Tilføj nye keyframes, Rediger deres samlede varighed, og ændre animationsformaterne, herunder bevægelser baseret på X / Y aksen.
For det første vil det se ud ekstremt forvirrende, især hvis du aldrig har lavet keyframe animation før. Men jo mere du spiller med denne ansøgning, desto mere giver det mening.
Som standard har du masser af forskellige muligheder for lempelse at rive med og de er alle super nemme at tilpasse.
Det Motion graf er meget sværere at lære, men det giver dig langt mere kontrol over din animationslempelse. Stylie tillader dig selv Gem brugerdefinerede bevægelseseffekter og genbrug disse i fanen Keyframes for andre animationer.
Hvis jeg kunne klage over en ting, er det webappsens manglende responsivt design.
Jeg kunne ikke få hele appen til at passe ind på min 13 "MacBook Pro-skærm, selvom browseren er fuldt maksimeret. Dette kan være et problem, da siden ikke har en lodret rullepanel, og mange af mulighederne (som eksporteret kode) findes lavere i indstillingsruden.
Men bortset fra denne mindre irritation, fik jeg det til at fungere fint på min større skærm. Og eksportkvalitet er ligesom intet andet, du finder på internettet.
Tag et kig på Stylie-appen for at se, hvordan det virker, og prøv at snyde med nogle af mulighederne. Når du har lavet din animation, kan du eksportere CSS eller JavaScript og brug det til ethvert projekt du kan lide.
Hvis du har problemer med at lære grænsefladen, kan du også se denne korte vejledning, der strækker sig cirka 9 minutter lang og dækker alle de vigtigste funktioner.
