Ce este Animate.css?
Aplicație Animate.css
Primul lucru pe care trebuie să-l faceți pentru a utiliza această bibliotecă după descărcare este să-l conectați la fișierul HTML:
După introducerea bibliotecii într-o pagină web, veți avea acces la toate animațiile sale, cât și pentru apelul către orice element necesită atribui numai clasă animat, face un spațiu și introduceți numele animației dorite. Lista de animații este aici. De exemplu:
Curs practic pe aterizare adaptivă de la zero!
Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile
Imaginați-vă acest cod HTML:
Trebuie să animați partiția atunci când apăsați butonul cu atenție. Mai întâi atribuiți o opacitate de 0. Apoi, adăugați dinamic următoarele clase:
Dacă doriți, în CSS puteți modifica viteza de animație, așa cum se arată aici:
În plus, puteți modifica dimensiunea întârzierii animației și numărul de pierderi prin folosirea întârzierii de animație și a numărului de animații-iterație.
De asemenea, foarte rece se obține în cazul în care, la sfârșitul animației și a apela o funcție pentru a prezenta pentru a intra în alte animații, sau pur și simplu rulați funcția. Acesta va trebui să utilizeze un singur eveniment, atașați-l la sfârșitul animației, și adaugă un element de clasă ne-necesară pentru animație. În acest caz, de asemenea, am adăuga întârziere clasa, care va oferi o întârziere între afișarea dispariția dispărea gradual fade out:
În ceea ce privește CSS, trebuie doar să adăugați o clasă de întârziere:
Pe site-ul Codepen există un demo al acestei animații.
concluzie
Am foarte mult ca de animație CSS, și apariția unei astfel de bibliotecă simplifică foarte mult utilizarea sa și, în plus, toate animația este un browser, care, în sine - un plus imens.
Ediție: Comanda webformself.
Curs practic pe aterizare adaptivă de la zero!
Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile
Cele mai recente știri despre dezvoltarea IT și web pe canalul nostru de telegrame
Practicați HTML5 și CSS3 de la zero la rezultatul!
Articole similare
-
Conectori în mână sau cum să utilizați în mod corespunzător priza
-
Este dăunător pentru a utiliza deodorant, decât pentru a trata
Trimiteți-le prietenilor: