10 CSS3 Animationsværktøjer Du skal bogmærke
Som folk har en tendens til lettere at opfatte ting, der bevæger sig, kan intelligente animationer forbedre brugerens oplevelse af et websted ved opmærksom på vigtige elementer, brugerne hurtigt skal bemærke.
CSS3 har introduceret en ny animationssyntax, der kan hjælpe dig med at opnå mange interessante ting i dine designs. Opbygning af kølige animationer kan nogle gange være kompliceret og tidskrævende, men det er da animaiton-biblioteker og generatorer kan blive udmærket brugt.
Tjek nogle af de animationer, der er muligt med CSS:
- 38 Inspirerende CSS3 animationsdemonstrationer
- 15 Smukke Teksteffekter Opret med CSS
- 30 Cool CSS Animationer du skal se
- Sådan oprettes bounce-effekten med CSS3-animation
I dette indlæg vil vi se på 10 strålende værktøjer, der kan gøre det nemmere og hurtigere at lave dine egne animationer.
1. CSS3Gen CSS3 Animation Generator
CSS3Gen giver dig en nem at bruge animationsgenerator, der giver dig mulighed for hurtigt at generere grundlæggende animationer. Selv om du ikke laver komplicerede kunstværker med dette værktøj, er det et godt valg, hvis du vil oprette en standard animation uden for meget travlhed.
Du behøver ikke gøre dine hænder beskidte med kode, da du kan indstille egenskaberne på et formular, skal du forhåndsvise resultatet og derefter blot kopiere og indsætte koden i din egen CSS-fil.
2. CSS Animere
hvis du har brug for mere komplicerede animationer, du kan finde CSS animere nyttig. Den har et mere modent brugerinterface, du kan indstille lidt flere egenskaber, og du kan følge, stoppe og genstarte animationen ved hjælp af en intuitiv tidslinje.
Der er også Eksempel animationer, som f.eks “Bounce”, “Ryste”, og “Svinge”, at du kan indlæse generatoren og ændre koden efter dine behov.
3. Coveloping CSS Animation Generator
Covelopings animationsgenerator er nok det bedste valg hvis du er ny med CSS3 animationer, og vil hurtigt forstå, hvordan de virker. Dette enkle, men kraftfulde værktøj giver dig mulighed for at teste de forskellige typer animationer CSS3 har at byde på, og nemt se, hvad der er forskellen mellem dem.
Du skal kun indstille 4 parametre: animationstype, animationsfunktion, varighed i sekunder, og hvis animationen er uendelig. Når du er klar, behøver du kun at få fat i den genererede HTML- og CSS-kode.
4. Magic Animationer
Magic Animationer er et køligt CSS bibliotek, der gør det muligt at nemt placere animationer med specielle effekter på dit websted. For eksempel kan du gøre elementer forsvinde ind og ud, åben til venstre eller højre, så vende tilbage, rotere ned, op, til venstre eller højre, og mange andre
Alt du skal gøre er at downloade koden, inkludere CSS-filen i din HTML-side, og tilføj den relevante klasse ved hjælp af jQuery på følgende måde:
$ ('. yourdiv'). svømmer (funktion () $ (dette) .addClass ('magictime puffIn');); Du kan også ændre timerens indstillinger og gøre animationen uendelig ved hjælp af jQuery (for mere detaljer se readme-filen).
5. Animate.css
Animate.css giver dig et sæt af cool, cross-browser CSS3 animationer. Animationerne er opdelt i grupper som Attention Seekers, Bouncing Entrances, Bouncing Exits, Fading Entrances og mange andre, så du kan virkelig ikke klage over manglende valg.
Du kan downloade koden fra Github, så du skal kun tilføje CSS-filen til din HTML-side og de relevante CSS-klasser til de HTML-elementer, du vil animere.
6. Bounce.js
Bounce.js er et praktisk JavaScript bibliotek, der gør det muligt for dig skabe komplicerede animationer. Bounce.js har en moden brugergrænseflade, som giver dig mulighed for enten at tilføje forskellige komponenter - som f.eks. Lempelse, varighed, forsinkelse og antallet af hopper - manuelt til din animation, eller vælg en forudindstillet forudindstilling, og spil derefter animationen, og finjustere egenskaberne, hvis det er nødvendigt.
7. AniJS
AniJS er et superkool JavaScript bibliotek, der giver dig mulighed for at tilføje CSS3 animationer til dine designs, og til bygge sofistikerede brugerinterface komponenter som animerede faner, accordeoner, modeller, glidende menuer, mobilapp-meddelelser, scroll afslører og mange flere.
Det fungerer sammen med alle moderne browsere, herunder iOS og Android, behøver ikke nogen tredjeparts biblioteker og har en spektakulær udstillingsvindue kaldet AniCollection, hvor du nemt kan eksperimentere med de forskellige effekter, som biblioteket giver.
8. Single Element CSS Spinners
Har du nogensinde ønsket at forbedre dine designs med animerede loading spinners? Hvis svaret er ja, kan dette søde CSS spinner bibliotek være et glimrende valg for dig. CSS-koden til spinners er skrevet i LESS. Der er ingen indstillinger, koden er klar, du skal bare indsætte den i dine egne HTML- og CSS-filer.
9. Odometer
kilometertæller er et glimrende værktøj til placere kølige animerede målere på dit websted. Det er et CSS- og JavaScript-bibliotek, CSS-delen er skrevet i Sass, og du kan vælge mellem forskellige temaer som f.eks “digital”, “Togstation”, og “Bil”.
For at bruge Kilometertæller skal du tilføje JavaScript-filen og den valgte temafil til din HTML-side og derefter class = "kilometertæller" vælger til det element, du vil lave i en animeret måler. Ideelt valg til visuelt at repræsentere data, eller at lave en “Kommer snart” side mere iøjnefaldende.
10. Snabbt.js
Snabbt.js er et minimalistisk animationsbibliotek der hjælper dig med nemt at flytte tingene rundt. Hvis du har brug for en lille inspiration, tag et kig på demoerne for at se, hvad du kan opnå med dette smarte animationsværktøj, er det animerede periodiske bord på skærmbilledet nedenfor kun en af de mange muligheder, Snabbt.js gør det nemt at implementere.
Du skal skrive lidt JavaScript, hvis du vil bruge dette bibliotek, men da resultatet er ret spektakulært, så er det nok værd at besværet.
