Bygg Cool CSS Animasjoner enkelt med Animista

Det er Tonnevis av CSS animasjon web apps på nettet. Men svært få sammenligner med detaljnivået og brukervennligheten du får med Animista.

Denne gratis webappen lar deg generere egendefinerte CSS-animasjoner ved å klikke på en knapp. Du velger mellom forhåndsdefinerte bevegelser som lysbilder, forvandler, svinger, og til og med skyggefall animasjoner.

Når du har opprettet animasjonen, kan du eksporter koden akkurat som med andre CSS generatorer. Bortsett fra, denne koden er mye lettere å jobbe med og til og med leveres med et innebygd minifier verktøy.

Grensesnittet kan føle seg forvirrende først, men det er bare på grunn av hvor mange alternativer du har!

Du bygger egendefinerte animasjoner følgende tre hovedtrinn og bruker grensesnittet fra topp til bunn:

1. Velg en bevegelsestil (sving, glid, flip-skala) fra kretsene på toppen
2. Tilpass det med forskjellige bevegelsetyper under
3. Rediger animasjonsalternativene dine i den flytende venstre sidealternativlinjen

Gjennom denne prosessen kan du endre animasjonens totale varighet, lette stilen, forsinkelsen, stort sett alt. Og alt Fungerer gjennom ren CSS3, noe som gjør det enda mer imponerende.

Legg også merke til øverste navbar du kan selv velge mellom forskjellige typer animasjonsmålstiler.

De standard er “grunnleggende” som kan fungere på stort sett alt (svever, klikk eller umiddelbar animasjon). Andre mål inkluderer side tekst, bakgrunn animasjoner, og til og med egendefinerte inngang animasjoner for å få et skjult sideelement til visning.

Jeg liker spesielt “oppmerksomhet” link øverst som har noen kule shake & jitter effekter for knappestiler. Disse fungerer bra på CTA-knapper for å hente oppmerksomhet og oppmuntre brukerinteraksjoner.

Når du er ferdig med å gjøre justeringer, bare du klikk på ikonet for liten brakett i øverste høyre hjørne av forhåndsvisningspanelet.

Dette bringer en ny side til oversikt med din full CSS animasjonsklasse, sammen med keyframes. Valgfrie funksjoner tillater deg å redusere koden og inkludere automatisk prefikser som støtter eldre nettlesere.

Jeg har brukt tonnevis av egendefinerte CSS animasjonsverktøy og uten tvil Animista er det mest funksjonelle verktøyet der ute. Det er helt gratis og litt komplisert først, men når du forstår grensesnittet, er det uten tvil den beste generatoren du kan bruke.

For å prøve det, bare besøk hjemmesiden og klikk “Prøv meg”. Du kan også dele dine tanker og komplimenter med webappsens skaperen @ ana108.