10 CSS3 Animasjonsverktøy Du bør legge til bokmerke

Som folk har en tendens til å lettere oppleve ting som beveger seg, kan smart animerte animasjoner forbedre brukeropplevelsen til et nettsted av oppmerksomhet på viktige elementer brukerne må raskt merke.

CSS3 har introdusert en ny animasjons syntaks som kan hjelpe deg med å oppnå mange interessante ting i designene dine. Å bygge kule animasjoner kan noen ganger være komplisert og tidkrevende skjønt, det er da animaiton-biblioteker og generatorer kan bli utmerket brukt.

Sjekk ut noen av animasjonene som er mulig med CSS:

• 38 Inspirerende CSS3 Animasjonsdemoer
• 15 vakre teksteffekter laget med CSS
• 30 Cool CSS Animasjoner du må se
• Slik lager du Bounce Effect med CSS3 Animation

I dette innlegget vil vi se på 10 strålende verktøy som kan gjøre det enklere og raskere å lage dine egne animasjoner.

1. CSS3Gen CSS3 animasjonsgenerator

CSS3Gen gir deg en brukervennlig animasjonsgenerator som lar deg raskt generere grunnleggende animasjoner. Selv om du ikke vil gjøre kompliserte kunstverk med dette verktøyet, er det et godt valg hvis du vil lage en standard animasjon uten for mye oppstyr.

Du trenger ikke å gjøre hendene skitne med kode, Som du kan sette egenskapene på et skjema, forhåndsvisning av resultatet, og deretter kopier og lim inn koden til din egen CSS-fil.

2. CSS Animate

Hvis du trenger mer kompliserte animasjoner, du kan finne CSS Animate nyttig. Den har en mer moden brukergrensesnitt, du kan angi litt flere egenskaper, og du kan følge, stoppe og starte animasjonen ved hjelp av en intuitiv tidslinje.

Det finnes også Eksempel animasjoner, for eksempel “Sprette”, “Riste”, og “Svinge”, at du kan laste inn i generatoren, og endre koden i henhold til dine behov.

3. Coveloping CSS Animation Generator

Covelopinganimasjonsgenerator er sannsynligvis det beste valget hvis du er ny med CSS3 animasjoner, og vil raskt forstå hvordan de jobber. Dette enkle, men kraftige verktøyet lar deg teste de forskjellige typer animasjoner CSS3 har å tilby, og enkelt sjekke ut hva som er forskjellen mellom dem.

Du må bare sette 4 parametere: animasjonstype, animasjonsfunksjon, varighet i sekunder, og hvis animasjonen er uendelig. Når du er klar, må du bare få tak i den genererte HTML- og CSS-koden.

4. Magic Animasjoner

Magic Animasjoner er et kult CSS bibliotek som gjør det mulig å Legg enkelt animasjoner med spesielle effekter på nettstedet ditt. For eksempel kan du gjøre elementer forsvinne inn og ut, åpne til venstre eller høyre, så returnere, rotere ned, opp, til venstre eller høyre, og mange andre

Alt du trenger å gjøre er å laste ned koden, inkludere CSS-filen i HTML-siden din, og legg til riktig klasse ved hjelp av jQuery på følgende måte:

 $ ('. yourdiv'). hover (funksjon () $ (dette) .addClass ('magictime puffIn'););

Du kan også endre innstillingene til timeren og gjøre animasjonen uendelig ved hjelp av jQuery (for mer informasjon se readme-filen).

5. Animate.css

Animate.css gir deg et sett med Kule, kryss-browser CSS3 animasjoner. Animasjonene er delt inn i grupper som Attention Seekers, Bouncing Entrances, Bouncing Exits, Fading Entrances, og mange andre, slik at du virkelig ikke kan klage på mangel på valg.

Du kan laste ned koden fra Github, da må du bare legge til CSS-filen på HTML-siden din og de relevante CSS-klassene til HTML-elementene du vil animere.

6. Bounce.js

Bounce.js er et praktisk JavaScript-bibliotek som gjør det mulig å skape kompliserte animasjoner. Bounce.js har et modent brukergrensesnitt som lar deg enten legge til forskjellige komponenter - for eksempel lettelse, varighet, forsinkelse og antall bounces - manuelt til animasjonen, eller velg en forhåndsdefinert forhåndsinnstilling, og spill deretter animasjonen, og finjustere egenskapene hvis det er nødvendig.

7. AniJS

AniJS er et superkool JavaScript-bibliotek som lar deg legge til CSS3 animasjoner til designene dine, og til bygge avanserte grensesnittkomponenter for eksempel animerte faner, trekkspill, modaler, skyvemenyer, mobilappvarsler, rulle avslører, og mange flere.

Den fungerer med alle moderne nettlesere, inkludert iOS og Android, trenger ikke noen tredjepartsbiblioteker, og har et spektakulært utstillingsvindu som heter AniCollection, hvor du enkelt kan eksperimentere med de forskjellige effektene som biblioteket gir.

8. Single Element CSS Spinners

Har du noen gang ønsket å forbedre designene dine med animerte lastespinnere? Hvis svaret er ja, kan dette søte CSS spinner biblioteket være et utmerket valg for deg. CSS-koden for spinnene er skrevet i MINDRE. Det er ingen innstillinger, koden er ferdig, du må bare sette den inn i dine egne HTML- og CSS-filer.

9. Odometer

kilometer~~POS=TRUNC er et glimrende verktøy til plasser kule animerte meter på nettstedet ditt. Det er et CSS og JavaScript-bibliotek, CSS-delen er skrevet i Sass, og du kan velge mellom forskjellige temaer som “digitalt”, “Togstasjon”, og “Bil”.

For å bruke kilometerteller må du legge til JavaScript-filen og den valgte temafilen på HTML-siden din, deretter class = "kilometerteller" velger til elementet du vil lage i en animert meter. Ideelt valg for å visuelt representere data, eller å lage en “Kommer snart” side mer iøynefallende.

10. Snabbt.js

Snabbt.js er et minimalistisk animasjonsbibliotek som hjelper deg med å flytte ting rundt. Hvis du trenger litt inspirasjon, ta en titt på demoene for å se hva du kan oppnå med dette smarte animasjonsverktøyet, det animerte periodiske bordet på skjermbildet nedenfor er bare en av de mange mulighetene Snabbt.js gjør det enkelt å implementere.

Du må skrive litt JavaScript hvis du vil bruke dette biblioteket, men da resultatet er ganske spektakulært, så er det sannsynligvis verdt trøbbel.