Animate.css je už niekoľko rokov a musím priznať, že som na stranu dosť neskoro. Objavil som to len pred pár mesiacmi, keď som hľadal sieť pre nejaké animačné návody CSS a zistil som, čo musí byť najrýchlejší a najjednoduchší spôsob animácie okolo, Animate.css.
Vytvoril chlap s názvom Dan Eden, Animate.css je rýchly spôsob, ako zistiť, ako funguje CCS a získať nejakú animáciu na vašom webe.
Popísané ako „Just-add water CSS animation“ Animate.css je trochu zábavy s vážnou stránkou. Umožňuje aj amatérskym webovým dizajnérom, ako som ja, rýchlo zvládnuť základy animácie CSS a vytvárať jednoduché, ale efektívne účinky pre webové stránky. Od jedného animovaného nadpisu po viac zapojené pohyby to dokáže tento nástroj.
Animate.css
Animate.css je k dispozícii na stiahnutie z GitHubu a je to v podstate knižnica jednoduchých efektov CSS zhromaždených na jednom mieste. Každá animácia je pekne zabalená a pripravená na použitie. Všetko, čo musíte urobiť, je nájsť animáciu, ktorá sa vám páči, a použiť triedu. Naozaj je to všetko.
Ak nechcete, stiahnite si celú knižnicu, pretože v nej je 2 500 riadkov kódu. Môžete navštíviť web Animate.css, nájsť animáciu a kliknúť na odkaz Download Animate.css. Načíta triedu na webovú stránku, aby ste ju mohli podľa potreby kopírovať a používať.
Je však jednoduchšie používať GitHub a rozbaliť, aby ste našli efekt, ktorý hľadáte.
- Prejdite na stránku css GitHub.
- Kliknutím na odkaz Zdroj otvoríte zoznam prvkov.
- Zo zoznamu vyberte požadovaný efekt. Bounce je hľadačom pozornosti, preto vyberte odkaz na pozornosť.
- Vyberte bounce.css.
- Skopírujte kód a umiestnite ho na svoju stránku, aby ste použili animáciu.
Je to skutočne také jednoduché. Samozrejme by ste vybrali rôzne možnosti pre rôzne efekty, ale konečný výsledok je rovnaký. Prístup k kódu nevyhnutnému na vykonanie ťažkého zdvíhania na stránke.
Vytvorenie animovaného objektu pomocou Animate.css
Vytvorenie niečoho super s Animate.css je jednoduché. Ide len o nájdenie kódu CCS a jeho pridanie do vášho vlastného CSS. Ak to dokážem, môže to niekto!
Prvou možnosťou na stránke Animate.css je okamžité opomenutie, takže ju použite v tomto príklade.
- Prilepiť “ 'vo vnútri vo vašej šablóne so štýlmi.
- Nájdite CSS pre požadovanú animáciu a pridajte ju k prvku, ktorý chcete animovať. Napríklad pridajte „ 'pridajte tento efekt odskokov na testovanie, obrázok alebo čokoľvek iné.
- Aby to fungovalo, pridajte nasledujúci kód CSS. Prevzaté z bounce.css vyššie.
@keyframes bounce {
od 20%, 53%, 80% do {
funkcia načasovania animácie: kubický bezier (0, 215, 0, 610, 0, 355, 1 000);
transformácia: translate3d (0, 0, 0);
}
40%, 43% {
funkcia načasovania animácie: kubický bezier (0, 755, 0, 050, 0, 855, 0, 060);
transformácia: translate3d (0, -30px, 0);
}
70% {
funkcia načasovania animácie: kubický bezier (0, 755, 0, 050, 0, 855, 0, 060);
transformácia: translate3d (0, -15px, 0);
}
90% {
transformácia: translate3d (0, -4px, 0);
}
}
.bounce {
animation-name: bounce;
transformačný pôvod: stredné dno;
}
Pokračovanie animácie s Animate.css
Vyššie uvedená sekvencia dodáva efekt odrazenia pri prvom načítaní stránky, čo je skvelé, ale jednorazové. A čo tak, že to pridáme do vznášania sa. Týmto spôsobom sa vždy, keď sa niekto vznáša nad testom, odrazí. Nie je to niečo, čo by som robil na produkčnej webovej stránke, ale je to vynikajúci spôsob, ako demonštrovať, ako všetko funguje.
Pridajte nasledujúci kód do svojho CSS a pridajte efekt okamžitého odchodu po umiestnení kurzora myši. Vždy, keď sa myš vznáša nad prvkom, mala by sa odraziť.
.animated: hover {
-webkit-animation-duration: 1s;
-moz-animácia-trvanie: 1s;
-ms-animation-duration: 1s;
-o-animácia-trvanie: 1s;
trvanie animácie: 1s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animácia-režim vyplnenia: oboje;
režim animácie-výplne: oboje;
}
Ak poznáte CSS, budete vedieť oveľa lepšie ako ja o tom, ako implementovať rôzne efekty pre rôzne akcie. Ako začiatočník mi toto a knižnice uvedené v časti Animate.css pomáhajú vytvárať základné, ale efektívne animácie pre moje webové stránky.
Neviem, koľko by som použil na živej webovej stránke, pretože nie vždy klesajú príliš dobre a používateľom mobilných telefónov sa im vôbec nepáči. Ako lekcia o tom, ako CSS funguje a ako sa dá použiť na vylepšenie webu, je to skvelý zdroj. Som len začiatočník, ale dokonca som strávil pár hodín programom Animate.css pre tento tutoriál, ktorý ma veľa naučil. Myslím, že si s tým budem hrať oveľa skôr, ako budem hotový. A čo ty?
