10 Orodja za animacijo CSS3, ki jih morate označiti

Ker ljudje lažje dojemajo stvari, ki se premikajo, lahko pametno uporabljene animacije izboljšajo uporabniško izkušnjo spletnega mesta opozarjanje na pomembne elemente, ki jih morajo uporabniki hitro opaziti.

CSS3 je uvedel novo sintakso animacije, ki vam lahko pomaga pri doseganju številnih zanimivih stvari v svojih modelih. Gradnja kul animacij je včasih lahko zapletena in zamudna, zato se lahko odlične knjižnice in generatorji animaitona odlično uporabljajo.

Oglejte si nekatere animacije, ki jih omogoča CSS:

• 38 Navdihujoče CSS3 animacije Demos
• 15 lepih besedilnih učinkov, ustvarjenih s CSS
• 30 Cool CSS animacije, ki jih morate videti
• Kako ustvariti učinek odboja z animacijo CSS3

V tem prispevku si bomo ogledali 10 briljantnih orodij, ki omogočajo lažje in hitrejše ustvarjanje lastnih animacij.

1. CSS3Gen CSS3 Generator animacije

CSS3Gen vam ponuja enostaven za uporabo generator animacije, ki vam omogoča hitro ustvarjanje osnovnih animacij. Čeprav s tem orodjem ne boste ustvarjali zapletenih umetniških del, je odlična izbira, če želite ustvariti standardno animacijo brez preveč napora.

Ti Ni vam treba umazati roke s kodo, ker lahko nastavite lastnosti na obrazcu, si ogledate rezultat, nato preprosto kopirajte in prilepite kodo v svojo datoteko CSS.

2. CSS Animate

Če ti potrebujete bolj zapletene animacije, morda boste našli CSS Animate koristno. Ima zrelejši uporabniški vmesnik, lahko nastavite nekoliko več lastnosti in lahko sledite, ustavite in znova zaženete animacijo s pomočjo intuitivne časovne premice.

Obstajajo tudi primeri animacij, kot so “Bounce”, “Shake”, in “Swing”, ki jih lahko naložite v generator in spremenite kodo glede na vaše potrebe.

3. Coveoping CSS Animation Generator

Pokrivanje's animacija generator je verjetno najboljša izbira če ste novi z animacijami CSS3, in želijo hitro razumeti, kako delujejo. To preprosto, a zmogljivo orodje vam omogoča, da preizkusite različne vrste animacij, ki jih ponuja CSS3, in preprosto preverite, kakšna je razlika med njimi.

Nastaviti morate samo 4 parametre: vrsto animacije, funkcijo animacije, trajanje v sekundah in če je animacija neskončna. Ko ste pripravljeni, morate dobiti in zgrabiti ustvarjeno kodo HTML in CSS.

4. Magic Animacije

Magic Animacije je kul knjižnica CSS, ki omogoča enostavno postavite animacije s posebnimi učinki na vašem spletnem mestu. Na primer, lahko naredite elemente, da izginejo in odprejo, odprete levo ali desno, nato se vrnete, zavrtite navzdol, navzgor, levo ali desno in še veliko

Vse kar morate storiti je, da prenesete kodo, vključite datoteko CSS v svojo HTML stran in dodate ustrezen razred s pomočjo jQuery na naslednji način:

 $ ('. yourdiv'). hover (funkcija () $ (this) .addClass ('magictime puffIn'););

Spremenite lahko tudi nastavitve časovnika in animacijo naredite neskončno s pomočjo jQuery (za več podrobnosti glejte datoteko readme).

5. Animate.css

Animate.css vam ponuja niz kul, cross-browser CSS3 animacije. Animacije so razdeljene v skupine, kot so osebe, ki iščejo pozornost, odskočni vhodi, odskočni izhodi, izginjajoči vhodi in mnogi drugi, tako da se ne morete pritoževati zaradi pomanjkanja izbire.

Lahko prenesete kodo iz Githuba, nato pa morate na stran HTML dodati samo datoteko CSS in ustrezne razrede CSS v elemente HTML, ki jih želite animirati..

6. Bounce.js

Bounce.js je priročna knjižnica JavaScript, ki vam omogoča ustvarite zapletene animacije. Bounce.js ima zreli uporabniški vmesnik, ki vam omogoča, da bodisi ročno v animacijo dodajate različne komponente - kot so blaženje, trajanje, zakasnitev in število odbitkov - ali izberete prednastavitev, ki je pripravljena za uporabo, nato pa predvajate animacijo, in prilagodite lastnosti, če je to potrebno.

7. AniJS

AniJS je superkulirana JavaScript knjižnica, ki vam omogoča dodajanje animacij CSS3 v vaše modele in na graditi sofisticirane komponente uporabniškega vmesnika kot so animirani zavihki, harmonike, modali, drsni meniji, obvestila za mobilne aplikacije, prikažejo se drsniki in še veliko več.

Deluje z vsemi sodobnimi brskalniki, vključno z iOS in Android, ne potrebuje knjižnic tretjih oseb in ima spektakularno predstavitev AniCollection, kjer lahko preprosto eksperimentirate z različnimi učinki, ki jih ponuja knjižnica.

8. Enotni CSS Spinnerji

Ste že kdaj želeli izboljšati svoje modele animirani nabojniki? Če je odgovor pritrdilen, je ta lepa knjižnica CSS spinner odlična izbira za vas. Koda CSS za spinerje je napisana v LESS. Ni nastavitev, koda je pripravljena, vstaviti jo morate le v svoje HTML in CSS datoteke.

9. Odometer

Odometer je odlično orodje postavite kul animirane merilnike na svoje spletno mesto. To je knjižnica CSS in JavaScript, CSS del je napisana v Sassu in lahko izbirate med različnimi temami, kot je “Digitalno”, “Železniška postaja”, in “Avto”.

Če želite uporabljati Odometer, morate na svojo stran HTML dodati datoteko JavaScript in izbrano temo class = "odometer" izbirnik elementa, ki ga želite vnesti v animirani merilnik. Idealna izbira za vizualno predstavitev podatkov ali za izdelavo “Prihaja kmalu” stran bolj privlačna.

10. Snabbt.js

Snabbt.js je minimalistična knjižnica animacij, ki vam olajša premikanje stvari. Če potrebujete malo navdiha, si oglejte demote, da vidite, kaj lahko dosežete s tem pametnim orodjem za animacijo, animirana periodna tabela na spodnjem zaslonu je le ena od številnih možnosti, ki jih Snabbt.js omogoča enostavno izvajanje.

Če želite uporabiti to knjižnico, morate napisati malo JavaScripta, vendar je rezultat precej spektakularen, zato je verjetno vreden truda.