Stylie - En gratis CSS Web Animation Builder

Om du kämpar med CSS3-syntaxen och vill ha en enkelt sätt att skapa animeringar stylie är ett bra verktyg för att spara.

Detta är en av många gratis kodgeneratorer med fokus på rena CSS animerade effekter. Stylie är helt gratis och öppet, värd på GitHub och drivs av ett keyframe bibliotek som heter Rekapi.

Rekapi-biblioteket använder JavaScript, så det är ett alternativ till ren CSS. Och tack och lov stöder Stylie Web App båda metoderna, så du kan exportkod i antingen ren CSS eller JavaScript.

Som standard laddar den första sidan en kontinuerlig animationsdemo med en linjär animering. Du kan spela med detta genom att redigera standardinställningar i Fliken Motion eller genom att redigera Fliken Keyframes.

I keyframeslistan kan du lägg till nya nyckelbilder, redigera deras totala varaktighet, och ändra animationsstilarna, inklusive rörelser baserat på X / Y-axeln.

Först kommer detta att se ut extremt förvirrande, speciellt om du aldrig har gjort keyframe animation innan. Ju mer du spelar med den här applikationen desto mer är det meningsfullt.

Som standard har du massor av olika lättnader alternativ att röra med och de är alla super lätta att anpassa.

De Rörelse graf är mycket tuffare att lära sig men det ger dig mycket mer kontroll över din animationslättnad. Stylie låter dig även spara anpassade rörelseeffekter och återanvända dessa i fliken Keyframes för andra animeringar.

Om jag kunde klaga på en sak är det webappsens brist på responsiv design.

Jag kunde inte få hela appen att passa på min 13-tums MacBook Pro-skärm även om webbläsaren är fullt maximerad. Detta kan vara ett problem eftersom sidan inte har en vertikal rullningsrad och många av alternativen (som exporterad kod) finns lägre i inställningsfönstret.

Men bortsett från denna mindre irritation fick jag det bra på min större bildskärm. Och den exportkvalitet är som inget annat hittar du på webben.

Ta en titt på Stylie-appen för att se hur det fungerar och försök att fiska med några av alternativen. När du har skapat din animering kan du exportera CSS eller JavaScript och använd det för något projekt du gillar.

Om du har problem med att lära dig gränssnittet kan du också titta på den här korta handledningen som sträcker sig ca 9 minuter och täcker alla viktiga funktioner.