Byg Cool CSS Animationer nemt med Animista

Der er tonsvis af CSS animation web apps online. Men meget få sammenligner med detaljeringsniveauet og brugervenlighed du får med Animista.

Denne gratis webapp giver dig mulighed for generere brugerdefinerede CSS animationer med et klik. Du vælger mellem prædesignede bevægelser som dias, transformer, gynger og endda skyggefald animationer.

Når du har oprettet din animation, kan du eksporter koden ligesom med andre CSS generatorer. Undtagen, denne kode er meget nemmere at arbejde med og endda leveres med et indbygget minifier værktøj.

Interfacet kan føle sig forvirrende i starten, men det er kun på grund af, hvor mange muligheder du har!

Du opbygger brugerdefinerede animationer følgende tre hovedtrin og bruger grænsefladen fra top til bund:

1. Vælg en bevægelsesstil (sving, glide, flip-skala) fra cirklerne øverst
2. Tilpas det med forskellige bevægelsestyper under
3. Rediger dine animationsindstillinger i den flytende venstre side optionslinje

Gennem denne proces kan du ændre animationens samlede varighed, lette stilen, forsinkelsen, stort set alt. Og alt sammen arbejder gennem ren CSS3, hvilket gør det endnu mere imponerende.

Bemærk også øverst navbar du kan endda vælge mellem forskellige typer af animationsmålstile.

Det standard er “grundlæggende” som kan arbejde på stort set alt (svæver, klik eller øjeblikkelig animation). Andre mål omfatter sidetekst, baggrunds animationer og endda brugerdefinerede adgangs animationer for at få vist et skjult sideelement i visningen.

Jeg kan især lide “opmærksomhed” link øverst, som har nogle kølige shake & jitter effekter for knap stilarter. Disse arbejder godt på CTA-knapper for at fange opmærksomheden og opmuntre brugerinteraktioner.

Når du er færdig med at foretage justeringer, er du bare klik på ikonet for lille konsol i øverste højre hjørne af eksempelvinduet.

Dette bringer en ny side til syne med din fulde CSS animationsklasse sammen med keyframes. Valgfrie funktioner giver dig mulighed for reducere koden og inkludere auto-prefixeren som understøtter ældre webbrowsere.

Jeg har brugt tonsvis af brugerdefinerede CSS animationsværktøjer og uden tvivl er Animista det mest funktionsrige værktøj derude. Det er helt gratis og lidt komplekst i starten, men når du forstår grænsefladen, er det langt den bedste generator, du kan bruge.

For at prøve det, skal du bare besøge hjemmesiden og klikke på “Prøv mig”. Du kan også dele dine tanker og komplimenter med webappsens skaber @ ana108.