Bygg Cool CSS Animationer enkelt med Animista

Det finns massor av CSS animering webbapps på nätet. Men, väldigt få jämför med nivån på detaljer och användarvänlighet du får med Animista.

Den här gratis webbappen låter dig generera anpassade CSS-animationer med ett klick. Du väljer mellan förkonstruerade rörelser som diabilder, transformer, gungor och till och med skuggdropp animeringar.

När du har skapat din animering kan du exportera koden precis som med andra CSS-generatorer. Förutom, den här koden är mycket lättare att arbeta med och även levereras med ett inbyggt minirverktyg.

Gränssnittet kan känna sig förvirrande först men det är bara på grund av hur många alternativ du har!

Du bygger anpassade animeringar följande tre huvudsteg och använda gränssnittet från topp till tå:

1. Välj en rörelsestil (sväng, glida, vändskala) från cirklarna på toppen
2. Anpassa det med olika rörelse typer undertill
3. Redigera dina animeringsalternativ i alternativfältet för flytande vänster sida

Genom denna process kan du ändra animationens totala varaktighet, lättnadsstilen, förseningen, nästan allt. Och allting fungerar genom ren CSS3, vilket gör det ännu mer imponerande.

Också notera längst upp navbar kan du även välja mellan olika typer av animeringsmål stilar.

De standard är “grundläggande” vilket kan fungera på stort sett allting (sväva, klicka eller omedelbar animering). Andra mål inkluderar sidtext, bakgrunds animeringar och till och med anpassade ingångs animeringar för att få ett dolt sidelement i sikte.

Jag gillar särskilt “uppmärksamhet” länk på toppen som har några snygga shake & jitter effekter för knapp stilar. Dessa fungerar bra på CTA-knappar för att fånga uppmärksamhet och uppmuntra användarinteraktioner.

När du är klar gör justeringar, du bara klicka på ikonen för lilla fästet i det övre högra hörnet av förhandsgranskningsrutan.

Detta leder till en ny sida med din fulla CSS animationsklass, tillsammans med keyframes. Valfria funktioner gör att du kan Minifiera koden och inkludera automatisk prefixaren som stöder äldre webbläsare.

Jag har använt massor av anpassade CSS-animeringsverktyg och utan tvekan Animista är det mest funktionella verktyget där ute. Det är helt gratis och lite komplicerat först men när du förstår gränssnittet är det den absolut bästa generatorn du kan använda.

För att prova, besök bara hemsidan och klicka på “Testa mig”. Du kan också dela dina tankar och komplimanger med webbappsens skapare @ ana108.