„Animate.css“ jau yra keleri metai ir turiu pripažinti, kad gana vėlai einu į vakarėlį. Aš tai atradau tik prieš porą mėnesių ieškodamas CSS animacijos vadovėlių tinkle ir radau, kas turi būti greičiausias ir paprasčiausias būdas animuoti, „Animate.css“.
Sukurtas vaikino, vardu Danas Edenas, „Animate.css“ yra greitas būdas pamatyti, kaip veikia CCS, ir atlikti tam tikrus animacinius veiksmus jūsų svetainėje.
Apibūdinta kaip „Tiesiog pridėk vandens CSS animacija“ „Animate.css“ yra šiek tiek smagu, turint omenyje rimtą pusę. Tai leidžia net mėgėjiškiems interneto dizaineriams, tokiems kaip aš, greitai susipainti su CSS animacijos pagrindais ir sukurti paprastus, bet efektyvius efektus svetainėms. Šis įrankis gali tai padaryti nuo vienos animuotos antraštės iki labiau įtrauktų judesių.
Animuoti.css
„Animate.css“ galima atsisiųsti iš „GitHub“ ir iš esmės tai yra paprastų CSS efektų, surinktų vienoje vietoje, biblioteka. Kiekviena animacija yra gražiai supakuota ir paruošta naudoti. Viskas, ką jums reikia padaryti, tai rasti jums patinkančią animaciją ir pritaikyti klasę. Tam tikrai yra viskas.
Jums nereikia atsisiųsti visos bibliotekos, jei nenorite, nes joje yra 2500 kodo eilučių. Galite aplankyti svetainę Animate.css, rasti animaciją ir spustelėti nuorodą Atsisiųsti Animate.css. Ji įkelia klasę į tinklalapį, kad galėtumėte nukopijuoti ir naudoti, kaip jums atrodo tinkama.
Vis dėlto lengviau naudoti „GitHub“ ir gilintis, kad rastumėte ieškomą efektą.
- Eikite į css „GitHub“ puslapį.
- Spustelėkite nuorodą Šaltinis, kad pasiektumėte elementų sąrašą.
- Iš sąrašo pasirinkite norimą efekto tipą. „Bounce“ yra ieškantis dėmesio, todėl pasirinkite nuorodą attention_seekers.
- Pasirinkite „bounce.css“.
- Nukopijuokite kodą ir įdėkite jį į savo puslapį, kad pritaikytumėte animaciją.
Tai tikrai taip paprasta. Jūs, aišku, pasirinktumėte skirtingas skirtingų efektų parinktis, tačiau galutinis rezultatas yra tas pats. Prieiga prie kodo, kuris reikalingas sunkiam puslapio pakėlimui.
Animacinio objekto kūrimas naudojant Animate.css
Sukurti ką nors nuostabaus naudojant „Animate.css“ yra paprasta. Tereikia surasti CCS kodą ir įtraukti jį į savo CSS. Jei aš galiu tai padaryti, bet kas gali!
Pirmoji „Animate.css“ puslapio parinktis yra atšokimas, todėl pasinaudokime tuo šiame pavyzdyje.
- Įklijuoti ' ' viduje savo stiliaus lape.
- Suraskite norimos animacijos CSS ir pridėkite ją prie elemento, kurį norite animuoti. Pvz., Pridėkite „ 'pridėti tą atšokimo efektą bandymui, atvaizdą ar bet ką.
- Pridėkite šį CSS kodą, kad viskas veiktų. Paimta iš aukščiau esančio „bounce.css“.
@keyframes atšoka {
nuo, 20%, 53%, 80%, iki {
animacijos ir laiko funkcija: kubinis beregis (0, 215, 0, 610, 0, 355, 1, 000);
transformacija: translate3d (0, 0, 0);
}
40%, 43% {
animacijos ir laiko funkcija: kubinis bežeris (0, 755, 0, 050, 0, 855, 0, 060);
transformacija: translate3d (0, -30 taškų, 0);
}
70% {
animacijos ir laiko funkcija: kubinis bežeris (0, 755, 0, 050, 0, 855, 0, 060);
transformacija: translate3d (0, -15 taškų, 0);
}
90% {
transformacija: translate3d (0, -4px, 0);
}
}
.bounce {
animacija-name: atšokti;
transformacijos kilmė: centras apačioje;
}
Animacijos plėtojimas toliau naudojant Animate.css
Aukščiau pateikta seka prideda atmetimo efektą, kai puslapis pirmą kartą įkeliamas, o tai yra puiku, bet vienkartinis dalykas. Kaip būtų, jei mes jį įtrauktume? Tokiu būdu, kai kas nors užbėga ant bandymo, jis atšoka. Tai nėra kažkas, ką daryčiau gamybos svetainėje, tačiau tai puikus būdas parodyti, kaip viskas veikia.
Pridėkite šį kodą prie savo CSS, kad pridėtumėte atmetimo ant pelės žymeklio efektą. Kiekvieną kartą, kai pelė užlenktų virš elemento, ji turėtų atšokti.
.animuotas: užveskite pelę {
-webkit-animacijos trukmė: 1s;
-moz-animacijos trukmė: 1s;
-ms-animacijos trukmė: 1s;
-animacijos trukmė: 1s;
animacijos trukmė: 1 s;
-Webkit-animation-fill-mode: abu;
-moz-animacijos užpildymo režimas: abu;
-ms-animacijos užpildymo režimas: abu;
-oanimacijos-užpildymo režimas: abu;
animacijos užpildymo režimas: abu;
}
Jei žinote CSS, žinosite daug geriau nei aš apie tai, kaip įgyvendinti skirtingus veiksmus skirtingiems veiksmams. Kaip pradedančioji, tai ir Animate.css pateiktos bibliotekos padeda man sukurti paprastas, bet veiksmingas animacijas savo tinklalapiuose.
Nežinau, kiek jų naudočiau tiesioginėje svetainėje, nes jie ne visada atrodo per žemi, o mobiliųjų telefonų vartotojams, atrodo, jie visai nepatinka. Tačiau tai yra pamokos, kaip veikia CSS ir kaip ją galima naudoti žiniatinkliui tobulinti, tai puikus šaltinis. Aš esu tik pradedantysis, bet net praleidęs porą valandų su Animate.css šia pamoka mane daug ko išmokė. Manau, kad prieš tai padarysiu, žaisiu su juo daug daugiau. O kaip tau?
