10 instrumente de animație CSS3 ar trebui să marcați
Pe măsură ce oamenii tind să perceapă mai ușor lucrurile care se mișcă, animațiile inteligent utilizate pot spori experiența utilizatorilor unui site atrăgând atenția asupra elementelor importante pe care utilizatorii trebuie să le observe rapid.
CSS3 a introdus o nouă sintaxă de animație care vă poate ajuta să realizați multe lucruri interesante în desenele dvs. Construirea animațiilor cool poate fi uneori complicată și consumatoare de timp, totuși, atunci când bibliotecile și generatoarele animaiton pot fi folosite excelent.
Consultați câteva dintre animațiile posibile cu CSS:
- 38 Inspirarea demonstrațiilor de animație CSS3
- 15 Efecte de text frumoase create cu CSS
- 30 animații Cool CSS pe care trebuie să le vezi
- Cum se creează efectul bounce cu animația CSS3
În acest post vom analiza 10 instrumente strălucitoare care pot face mai ușor și mai rapid crearea propriilor animații.
1. Generator de animație CSS3Gen CSS3
CSS3Gen vă oferă un generator de animație ușor de utilizat care vă permite să generați rapid animații de bază. Deși nu veți face lucrări complicate cu acest instrument, este o alegere excelentă dacă doriți să creați o animație standard fără prea multă agitație.
Tu nu trebuie să-ți faci mâinile murdare cu cod, deoarece puteți seta proprietățile pe un formular, previzualizați rezultatul, apoi copiați și inserați codul în propriul fișier CSS.
2. CSS Animate
daca tu au nevoie de animații mai complicate, puteți găsi CSS Animate util. Are un UI mai matur, puteți seta ceva mai multe proprietăți și puteți urmări, opri și reporni animația cu ajutorul unei linii de timp intuitive.
Există, de asemenea, animații de exemplu, cum ar fi “Sări”, “Scutura”, și “Leagăn”, pe care le puteți încărca în generatorul, și modificați codul în funcție de nevoile dvs..
3. Coveloping CSS Animation Generator
CovelopingGeneratorul de animație este probabil cea mai bună alegere dacă sunteți nou cu animații CSS3, și vor să înțeleagă rapid cum funcționează. Acest instrument simplu dar puternic vă permite să testați diferitele tipuri de animații pe care CSS3 le oferă și să vedeți cu ușurință care este diferența dintre ele.
Trebuie doar să setați 4 parametri: tipul de animație, funcția de animație, durata în secunde și animația este infinită. Când sunteți gata, trebuie doar să obțineți și să luați codul HTML și CSS generat.
4. Magic Animations
Magic Animații este o bibliotecă CSS cool care o face posibilă plasați cu ușurință animații cu efecte speciale pe site-ul dvs. De exemplu, puteți face ca elementele să dispară, să se deschidă spre stânga sau spre dreapta, apoi să se întoarcă, să se rotească în jos, în sus, spre stânga sau spre dreapta și multe altele
Tot ce trebuie să faceți este să descărcați codul, să includeți fișierul CSS în pagina HTML și să adăugați clasa potrivită cu ajutorul jQuery în felul următor:
$ () .addClass ('magictime puffIn');); De asemenea, puteți modifica setările cronometrului și puteți realiza animația infinită cu ajutorul jQuery (pentru mai multe detalii, consultați fișierul readme).
5. Animate.css
Animate.css vă oferă un set de cool, cross-browser animații CSS3. Animațiile sunt împărțite în grupuri cum ar fi solicitanții de atenție, intrările de bouncing, ieșirile bouncing, intrările de estompare și multe altele, astfel că într-adevăr nu puteți să vă plângeți de lipsa alegerii.
Puteți descărca codul de la Github, atunci trebuie doar să adăugați fișierul CSS în pagina dvs. HTML, iar clasele CSS relevante pentru elementele HTML pe care doriți să le animați.
6. Bounce.js
Bounce.js este o bibliotecă JavaScript la îndemână care vă permite să creați animații complicate. Bounce.js are o interfață de utilizator matură, care vă permite fie să adăugați manual diferite animații, cum ar fi relaxarea, durata, întârzierea și numărul de bounces, sau să selectați o presetare gata de utilizare, apoi să redați animația, și ajustați proprietățile dacă este necesar.
7. AniJS
AniJS este o bibliotecă JavaScript supercool care vă permite să adăugați animații CSS3 la desenele și modelele dvs. construiți componente sofisticate ale UI cum ar fi filele animate, acordeoane, modale, meniuri de alunecare, notificări pentru aplicații mobile, dezvăluiri de defilare și multe altele.
Funcționează cu toate browserele moderne, inclusiv iOS și Android, nu are nevoie de biblioteci terțe părți și are o vitrină spectaculoasă numită AniCollection, unde puteți experimenta cu ușurință diferitele efecte furnizate de bibliotecă.
8. Spinners CSS cu un singur element
Ați vrut vreodată să vă îmbunătățiți designul animatoare de încărcare spinners? Dacă răspunsul este da, această drăguță bibliotecă CSS spinner poate fi o alegere excelentă pentru dvs. Codul CSS pentru centrifuge este scris în LESS. Nu există setări, codul este gata făcut, trebuie doar să îl inserați în propriile fișiere HTML și CSS.
9. Odometrul
Contorul de kilometraj este un instrument strălucit pentru plasați contoare animate cool pe site-ul dvs.. Este o bibliotecă CSS și JavaScript, partea CSS este scrisă în Sass și puteți alege din diferite teme, cum ar fi “Digital”, “Gară”, și “Mașină”.
Pentru a utiliza Odometrul, trebuie să adăugați fișierul JavaScript și fișierul tematic ales în pagina dvs. HTML, apoi class = "contor de parcurs" selectați elementul pe care doriți să-l faceți într-un contor animat. O alegere ideală pentru a reprezenta vizual datele sau pentru a face o “In curand” pagina mai ochi-prinderea.
10. Snabbt.js
Snabbt.js este o bibliotecă de animație minimalistă vă ajută să mutați ușor lucrurile în jur. Dacă aveți nevoie de puțină inspirație, aruncați o privire la demo-uri pentru a vedea ce puteți realiza cu acest instrument inteligent de animație, tabela periodică animată de pe ecranul de mai jos este doar una dintre multele posibilități Snabbt.js este ușor de implementat.
Trebuie să scrieți un pic JavaScript dacă doriți să utilizați această bibliotecă, dar, ca rezultat, este destul de spectaculos, deci merită probabil problema.
