Animate.css je že nekaj let in moram priznati, da sem na zabavo precej pozen. Odkril sem ga šele pred nekaj meseci, ko sem po spletu iskal nekaj vadnic za animacijo CSS in ugotovil, kaj mora biti najhitrejši, najpreprostejši način za animiranje, Animate.css.
Animate.css, ki ga je ustvaril fant Dan Eden, je hiter način, da vidite, kako CCS deluje in da na vašem spletnem mestu najdete nekaj animacijskih akcij.
Opisan kot "Just-add water CSS animacija" Animate.css je malce zabaven z resno platjo. Tudi ljubiteljskim spletnim oblikovalcem, kot sem jaz, omogoča, da se hitro spopadejo z osnovami animacije CSS in ustvarijo preproste, a učinkovite učinke za spletna mesta. Od enega animiranega naslova do bolj vključenih gibov to orodje lahko stori.
Animate.css
Animate.css je na voljo za prenos z GitHub-a in je v bistvu knjižnica preprostih učinkov CSS, zbranih na enem mestu. Vsaka animacija je lepo zapakirana in pripravljena za uporabo. Vse, kar morate storiti, je najti želeno animacijo in uporabiti razred. Za to je res vse.
Če želite, vam ni treba naložiti celotne knjižnice, saj je v njej 2500 vrstic. Lahko obiščete spletno mesto Animate.css, poiščete animacijo in kliknete povezavo Download Animate.css. Razred naloži na spletno stran, da ga kopirate in uporabljate, kot se vam zdi primerno.
Lažje je uporabljati GitHub, če želite, da bi našli učinek, ki ga iščete.
- Pomaknite se na stran css GitHub.
- Kliknite povezavo Vir za dostop do seznama elementov.
- S seznama izberite vrsto učinka, ki ga iščete. Odskok je iskalec pozornosti, zato izberite povezavo iskalcev pozornosti.
- Izberite bounce.css.
- Kopirajte kodo in jo postavite na svojo stran, da uporabite animacijo.
Res je tako preprosto. Za različne učinke bi očitno izbrali različne možnosti, končni rezultat pa je enak. Dostop do kode, ki je potrebna za težko dvigovanje na strani.
Gradnja animiranega predmeta z Animate.css
Z Animate.css zgradite nekaj kul. Gre le za iskanje CCS kode in dodajanje v svoj CSS. Če zmorem, lahko vsak!
Prva možnost na strani Animate.css je odskok, zato uporabimo to v tem primeru.
- Prilepi ' 'notri v svoji tabeli sloga.
- Poiščite CSS za želeno animacijo in jo dodajte elementu, ki ga želite animirati. Na primer dodajte » ', če želite dodati učinek odbijanja za preizkus, sliko ali kaj drugega.
- Dodajte naslednjo kodo CSS, da bo vse delovalo. Vzeto iz strani bounce.css zgoraj.
@keyframes odskoči {
od, 20%, 53%, 80%, do {
animacija-časovna funkcija: kubično-bezier (0, 215, 0, 610, 0, 355, 1.000);
preoblikovati: translate3d (0, 0, 0);
}
40%, 43% {
animacija-časovna funkcija: kubično-bezier (0, 755, 0, 050, 0, 855, 0, 060);
preoblikovati: translate3d (0, -30px, 0);
}
70% {
animacija-časovna funkcija: kubično-bezier (0, 755, 0, 050, 0, 855, 0, 060);
preoblikovati: translate3d (0, -15px, 0);
}
90% {
pretvorba: translate3d (0, -4px, 0);
}
}
.pogni {
animacija-ime: odskočiti;
transformacijski izvor: sredinsko dno;
}
Nadaljnje animacije z Animate.css
Zgornje zaporedje doda učinek odboja, ko se stran najprej naloži, kar je kul, vendar enkratna stvar. Kaj pa dodajamo, da lebdimo. Tako se vsakič, ko kdo premakne test, odbije. Nisem nekaj, kar bi naredil na produkcijski spletni strani, ampak je odličen način, kako pokazati, kako vse deluje.
V CSS dodajte naslednjo kodo, da dodate učinek odklopa. Vsakič, ko miška potegne miško nad elementom, mora odskočiti.
.animated: hover {
-webkit-animacija-trajanje: 1s;
-moz-animacija-trajanje: 1s;
-ms-animacija-trajanje: 1s;
-o-animacija-trajanje: 1s;
animacija-trajanje: 1s;
-webkit-animation-fill-mode: oboje;
-moz-animacija-način izpolnjevanja: oboje;
-ms-animacija-način izpolnjevanja: oboje;
-o-animacija-način izpolnjevanja: oboje;
način animacije in polnjenja: oboje;
}
Če poznate CSS, boste veliko bolje kot jaz vedeli, kako izvajati različne učinke v različnih dejanjih. Kot začetnik mi to in knjižnice v Animate.css pomagajo pri ustvarjanju osnovnih, vendar učinkovitih animacij za moje spletne strani.
Ne vem, koliko bi jih uporabil na spletnem mestu v živo, saj ne gre vedno preveč dobro, mobilni uporabniki pa jih sploh ne marajo. Kot lekcija o tem, kako deluje CSS in kako ga je mogoče uporabiti za izboljšanje spleta, je odličen vir. Sem samo začetnik, vendar me je celo nekaj ur preživelo z Animate.css za to vadbo. Mislim, da bom z njo igral še veliko več, preden bom končal. Kaj pa vi?
