Animate.css postoji već nekoliko godina i moram priznati da sam prilično zakasnio na zabavu. Otkrio sam to tek prije nekoliko mjeseci dok sam pretraživao po internetu za neke tutorijale za animaciju CSS-a i otkrio što mora biti najbrži i najjednostavniji način animiranja oko nas, Animate.css.
Animate.css kreiran od strane imena zvanog Dan Eden, brz je način da vidite kako CCS djeluje i da na vašoj web stranici otkrije neke animacijske akcije.
Opisivan kao "Samo dodajte CSS animaciju vode" Animate.css pomalo je zabavan s ozbiljne strane. To omogućava čak i amaterskim web dizajnerima, kao što sam ja, da se brzo upoznaju s osnovama CSS animacije i stvore jednostavne, ali učinkovite efekte za web stranice. Od jednog animiranog naslova do više uključenih pokreta, ovaj alat to može učiniti.
Animate.css
Animate.css dostupan je za preuzimanje sa GitHub-a i u osnovi je knjižnica jednostavnih CSS efekata prikupljenih na jednom mjestu. Svaka animacija lijepo je zapakirana i spremna za upotrebu. Sve što trebate učiniti je pronaći animaciju koja vam se sviđa i primijeniti klasu. To je doista sve.
Ako ne želite preuzeti cijelu biblioteku, ima 2500 redova koda. Možete posjetiti stranicu Animate.css, pronaći animaciju i kliknuti na vezu Animate.css. To učitava klasu na web stranicu da biste je kopirali i koristili kako smatrate prikladnim.
Lakše je koristiti GitHub i detaljnije pronađite efekt koji tražite.
- Dođite do stranice css GitHub.
- Kliknite vezu Izvor da biste pristupili popisu elemenata.
- S popisa odaberite vrstu učinka koju tražite. Odsad je alat za traženje pažnje, stoga odaberite vezu pretraživača.
- Odaberite bounce.css.
- Kopirajte kôd i stavite ga na svoju stranicu da biste primijenili animaciju.
Doista je tako jednostavno. Očito biste odabrali različite opcije za različite efekte, ali krajnji rezultat je isti. Pristup kôdu potrebnom za dizanje teških tereta na stranici.
Izgradnja animiranog objekta s Animate.css
Izgraditi nešto cool s Animate.css je jednostavno. Samo je pitanje pronaći CCS kôd i dodati ga u svoj CSS. Ako ja to mogu, bilo tko može!
Prva opcija na stranici Animate.css je odskočna točka, pa koristimo to u ovom primjeru.
- Lijepljenje ' ' unutra u vašoj tablici stilova.
- Pronađite CSS za animaciju koju želite i dodajte je elementu koji želite animirati. Na primjer, dodajte " 'dodati taj efekt odbijanja u test, sliku ili bilo što drugo.
- Dodajte sljedeći CSS kôd da bi sve radilo. Preuzeto s bounce.css gore.
@keyframes odskoči {
od, 20%, 53%, 80%, do {
animacija-timing funkcija: cubic-bezier (0, 215, 0, 610, 0, 355, 1.000);
transformirati: translate3d (0, 0, 0);
}
40%, 43% {
animacija-timing funkcija: cubic-bezier (0.755, 0.050, 0.855, 0.060);
transformirati: translate3d (0, -30px, 0);
}
70% {
animacija-timing funkcija: cubic-bezier (0.755, 0.050, 0.855, 0.060);
transformirati: translate3d (0, -15px, 0);
}
90% {
transformirati: translate3d (0, -4px, 0);
}
}
.odskakivati {
animacija-ime: odskočiti;
transformacijsko podrijetlo: središnje dno;
}
Daljnja animacija uz Animate.css
Gornji slijed dodaje učinak napuštanja početne stranice kad se stranica prvo učita, što je cool, ali jednokratna stvar. Kako bi bilo da ga dodamo lebdeći. Na taj način, kad netko lebdi na testu, odskoči. Nisam nešto što bih radio na produkcijskoj web stranici, ali je sjajan način pokazati kako sve funkcionira.
Dodajte sljedeći kôd u svoj CSS kako biste dodali učinak odskoka. Svaki put kada miš pređe preko elementa trebao bi odskočiti.
.animatirano: lebdeći {
-webkit-animacija-trajanje: 1s;
-moz-animacija-trajanje: 1s;
-ms-animacija-trajanje: 1s;
-o-animacija-trajanje: 1s;
trajanje animacije: 1s;
-webkit-animation-fill-mode: oboje;
-moz-animacija-način ispunjavanja: oboje;
-ms-animacija-fill-mode: oboje;
-o-animacija-fill-mode: oboje;
animacija-fill-mode: oboje;
}
Ako znate CSS, znat ćete puno bolje nego ja o tome kako implementirati različite efekte u različite akcije. Kao početnici, ova i knjižnice u Animate.css pomažu mi stvoriti osnovne, ali učinkovite animacije za moje web stranice.
Ne znam koliko bih koristio na web mjestu uživo jer se oni uvijek ne slažu previše a mobilni korisnici im se nimalo ne sviđaju. No, kako je lekcija o tome kako CSS djeluje i kako se može koristiti za unapređenje weba, to je sjajan resurs. Ja sam samo početnik, ali čak sam i proveo nekoliko sati s Animate.css za ovaj tutorial me naučio puno. Mislim da ću se igrati s njim puno više prije nego što završim. A ti?
