CSS yra vienas iš galingiausių būdų padaryti tinklalapį interaktyvų. Tai keičia mūsų pagrindinių išvaizdą ir jausmus tinklo puslapis. Viena iš svarbių ir įdomių CSS siūlomų funkcijų yra ta, kad ji leidžia mums atlikti animacijas. Tai leidžia mums perkelti elementus mūsų puslapyje. Pradėkime animacijų kelionę CSS tokia tvarka:
Animacijos CSS
Animacijų įtraukimas į mūsų svetainę yra puikus būdas atkreipti vartotojų dėmesį. Tai ne tik prideda mūsų puslapio vertės, bet ir praturtina vartotojų patirtį. CSS animacija yra sudaryta iš dviejų dalių. Jie yra
- Pagrindiniai kadrai
- Animacija
CSS animacijos palaikomos visose naršyklėse. Tačiau kai kurioms senesnėms naršyklėms, tokioms kaip „Safari“ (iki 8.0 versijos), animacijos ypatybėms interpretuoti reikalingas priešdėlis (-webkit-). Pavyzdžiui:
.anim {aukštis: 200 taškų pločio: 200 taškų fonas: šviesiai mėlynos spalvos padėtis: santykinis krašto spindulys: 100% -webkit-animation-name: cssanim / * senos naršyklės * / -webkit-animation-duration: 5s / * senos naršyklės * / animacija -name: cssanim animation-duration: 5s} / * senos naršyklės * / @ -webkit-keyframes cssanim {0% {left: 0px} 100% {left: 300px}} @keyframes cssanim {0% {left: 0px} 100 % {kairė: 300 taškų}}Mes galime naudoti HTML puslapio pavyzdį iš viršaus ir pakeisti CSS kodą stiliaus žymoje, kad išbandytume kitus pavyzdžius.
Pagrindiniai kadrai CSS
Tai yra CSS animacijų pagrindas. Jis naudojo apibrėždamas konkrečius animacijos momentus ir stilius mūsų tinklalapyje. Kitaip tariant, kai CSS viduje nurodome @keyframes, jis gauna valdymą modifikuoti esamą būseną į naują arba animuoti objektus tam tikrai trukmei.
„@Keyframe“ turi turėti tam tikras ypatybes, kad būtų galima valdyti animaciją, pvz., Animacijos pavadinimą, etapus ir ypatybes.
vardas - Kiekvienai animacijai reikalingas vardas, apibūdinantis jos elgesį.
Etapai - Scena reiškia animacijos užbaigimą. Tai galima padaryti žymint „arba“ ir „nuo“ raktiniu žodžiu, arba procentais, o 0% reiškia animacijos pradžios būseną ir 100% - animacijos pabaigos būseną. Procentinio vaizdavimo naudojimo pranašumas yra tas, kad mes galime apibrėžti kelis tarpinius etapus, t. Y. Koks turėtų būti animacijos elgesys 50% ar 75% etape.
Savybės - Šios savybės suteikia mums galimybę valdyti @keyframes, kad galėtume jais manipuliuoti animacijos metu.
.anim {aukštis: 200 taškų pločio: 200 taškų fonas: šviesiai mėlynos spalvos padėtis: santykinis kraštinės spindulys: 100% animacijos pavadinimas: cssanim animacijos trukmė: 5s} @ keyframes cssanim {0% {transform: scale (0.5) neskaidrumas: 0} 50 % {transformuoti: skalė (1,5) neskaidrumas: 1} 100% {transformuoti: skalė (1)}}Kadangi mes aiškiai suprantame, kokie yra pagrindiniai kadrai. Panagrinėkime animacijos ypatybes, kad apibūdintume, kaip animuoti savo elementus ir objektus. Dvi ypatybės, t. Y. Paveldėti ir pradinę, gali būti naudojamos su visais animacijos tipais. Šios savybės paprastai naudojamos kartu su „div“ žyma, norint parodyti skirtingą elgesį.
inicialas: Nustato šią ypatybę į numatytąją vertę.
paveldėti: Ši nuosavybė paveldima iš pirminio elemento.
Animacijos ypatybės
- animacijos pavadinimas
Jame nurodomas animacijos pavadinimas, kuriuo manipuliuojant naudojamas @keyframes.Galimos vertės yra šios:
- vardas: Tai nurodo pavadinimą, susietą su animacijos pagrindiniu kadru.
- nė vienas: Tai yra numatytoji reikšmė ir ją galima naudoti norint perimti paveldėtas ar pakopines animacijas.
Sintaksė:
animacijos pavadinimas: vardas | nėra | pradinis | paveldėti
.anim {aukštis: 200 taškų pločio: 200 taškų fonas: šviesiai mėlynos spalvos padėtis: santykinis kraštinės spindulys: 100% animacijos pavadinimas: cssanim animacijos trukmė: 5s} @keyframes cssanim {0% {left: 0px} 100% {left: 300px} }- animacijos trukmė
Jis nurodo laiką, per kurį animacija užbaigia vieną vykdymą. Jis apibrėžiamas sekundėmis arba milisekundėmis (pvz., 4 sekundėmis arba 400 ms). Numatytoji šios ypatybės vertė yra 0s, taigi, jei ši ypatybė nenurodyta, animacija nevyks.
Sintaksė:
animacijos trukmė: laikas
.anim {aukštis: 200px plotis: 200px fonas: mėlyna padėtis: santykinis kraštinės spindulys: 100% animacijos pavadinimas: cssanim animation-duration: 4s} @keyframes cssanim {0% {transform: scale (0.4) neskaidrumas: 0} 50 % {transformuoti: skalė (1.4) neskaidrumas: 1} 100% {transformuoti: skalė (1)}}- animacija-delsa
„Animation-delay“ ypatybė leidžia mums nurodyti animacijos vėlavimą. Jis apibrėžia, kada bus pradėta vykdyti animacijos seka.
Šios savybės vertę galima nurodyti sekundėmis (-ėmis) arba milisekundėmis (ms). Jame gali būti teigiamos ir neigiamos vertės. Teigiama reikšmė rodo, kad animacija bus pradėta praėjus nurodytam laikui ir iki tol ji liks nesanalizuota. Kita vertus, neigiama reikšmė iškart pradės animaciją nuo taško, tarsi ji jau būtų vykdoma nurodytą laiko tarpą.
Sintaksė:
animacija-delsa: laikas
.anim {aukštis: 200 taškų pločio: 200 taškų fonas: šviesiai mėlynos spalvos padėtis: santykinis kraštinės spindulys: 100% animacijos pavadinimas: cssanim animacijos trukmė: 4s animacijos vėlavimas: 4s} @keyframes cssanim {0% {left: 0px} 100% {kairėje: 250 taškų}}- animacija, iteracija, skaičius
Ši savybė nurodo animacijos sekos atkūrimo kartų skaičių. Numatytoji šios ypatybės vertė yra 1.Galimos vertės yra šios:
- numeris - žymi pakartojimų skaičių
- begalinis - rodo, kad animacija turėtų kartotis amžinai
Sintaksė:
animacijos pakartojimų skaičius: skaičius | begalinis
rūšiavimo masyvai c ++
.anim {aukštis: 200 taškų pločio: 200 taškų fonas: šviesiai mėlynos spalvos padėtis: santykinis kraštinės spindulys: 100% animacijos pavadinimas: cssanim animacijos trukmė: 2s animacijos pakartojimų skaičius: 4} @keyframes cssanim {0% {left: 0px} 100% {liko: 100px}}- animacijos kryptis
Tai apibrėžia animacijos kryptį. Elemento kryptį galima nustatyti žaisti pirmyn, atgal arba pakaitomis.Numatytoji šios ypatybės vertė yra normali ir ji nustatoma iš naujo kiekviename cikle.Galimos vertės yra šios:
normalus - Tai yra numatytasis elgesys ir animacija yra rodoma į priekį. Po kiekvieno ciklo animacija tampa pradine būsena ir vėl grojama pirmyn
atvirkščiai - Animacija grojama atgaline kryptimi. Po kiekvieno ciklo animacija pasiekia galutinę būseną ir yra grojama atgal
Alternatyva - Animacijos kryptis yra atvirkštinė, t. Y. Ji paleidžiama pirmyn, o paskui atgal kiekvieną ciklą. Kiekvienas nelyginis ciklas pateikia animaciją į priekį, o kiekvienas lyginis - atgal.
pakaitinis-atvirkštinis - Animacijos kryptis keičiama pakaitomis. Čia animacija yra paleista pirmyn atgal, o tada į priekį kiekviename cikle. Kiekvienas nelyginis ciklas juda atgal arba atgal, o kiekvienas lyginis ciklas pateikia animaciją į priekį.
Sintaksė:
animacijos kryptis: įprasta | atvirkštinis |pakaitinis | pakaitinis-atvirkštinis
.anim {aukštis: 200 taškų pločio: 200 taškų fonas: šviesiai mėlynos spalvos padėtis: santykinis kraštinės spindulys: 100% animacijos pavadinimas: cssanim animacijos trukmė: 2s animacijos pakartojimų skaičius: begalinis} @ raktų rėmeliai cssanim {0% {left: 0px} 100% {liko: 100px}}- animacijos laiko nustatymo funkcija
Ši savybė nustato greičio kreivę arba animacijos judėjimo stilių. Paskirta sklandžiai keisti animacijos stilių iš vienos formos į kitą. Jei nepriskiriama jokia vertė, ji pagal numatytuosius nustatymus palengvėja.Galimos animacijos laiko nustatymo funkcijos reikšmės yra šios:
lengvumas - Tai yra numatytoji turto vertė. Čia animacija prasideda lėtai, pamažu tampa greita viduryje ir vėl baigiasi lėtai.
linijinis - Animacija palaiko tą patį greitį viso ciklo metu, ty nuo pradžios iki pabaigos.
lengvumas - Animacija prasideda lėtai.
lengvumas - Animacija baigiasi lėtai.
palengvėjimas - Animacija lėtai juda tiek pradžios, tiek pabaigos metu.
kubinis bezieris (n, n, n, n) - Ši pažangi funkcija leidžia mums sukurti pasirinktinę laiko funkciją, apibrėžiant savo vertybes. Galima vertė svyruoja nuo 0 iki 1.
Sintaksė:
animacijos laiko nustatymo funkcija: tiesinė | lengvumas | lengvumas | lengvumas | lengvumas-išėjimas |kubinis bezieris (n, n, n, n)
.anim {aukštis: 200px plotis: 200px fonas: šviesiai mėlynos spalvos padėtis: santykinis kraštinės spindulys: 100% animacijos pavadinimas: cssanim animacijos trukmė: 2s animacijos kryptis: atvirkštinis} @keyframes cssanim {0% {background: oranžinė kairė: 0px } 50% {fonas: geltona kairė: 200 taškų viršuje: 200 taškų} 100% {fonas: mėlyna kairė: 100 taškų}}- animacijos užpildymo režimas
Tai yra ypatinga ypatybė, nes ji nustato animacijos stilių prieš arba po animacijos paleidimo.Kaip ir pagal numatytuosius nustatymus, elemento stiliui animacija neturi įtakos prieš prasidedant ar jai pasibaigus. Ši ypatybė yra naudinga, nes padeda nepaisyti šio numatytojo animacijos elgesio.Toliau pateikiamos galimos animacijos užpildymo režimo ypatybės reikšmės:
nė vienas - Tai yra numatytoji ypatybės reikšmė, ty animacijos stiliai nėra taikomi elementui prieš animaciją ar po jos.
pirmyn - Stilius išlaiko elementas galutinėje animacijos sekoje, t. Y. Baigus animaciją.
atgal - Stilius išlaiko elementas pradinėje animacijos sekoje, t. Y. Prieš animaciją žiūrint, ypač per vėlavimą.
tiek - Tai reiškia, kad animacija vyks tiek kryptimi, t. Y. Pirmyn ir atgal
Sintaksė:
animacijos užpildymo režimas: nėra | pirmyn | atgal | tiek
.anim {plotis: 50px aukštis: 50px fonas: šviesiai mėlyna spalva: baltas šrifto svoris: paryškinta pozicija: santykinis animacijos pavadinimas: cssanim animacijos trukmė: 5s animacijos kartojimo skaičius: begalinis krašto spindulys: 100%} # anim1 { animacijos laiko nustatymo funkcija: lengvumas} # anim2 {animacijos laiko nustatymo funkcija: linijinė} # anim3 {animacijos laiko nustatymo funkcija: lengvumo įjungimas} # anim4 {animacijos laiko nustatymo funkcija: lengvumo išjungimas} # anim5 {animacija- laiko nustatymo funkcija: „easy-in-out“ @keyframes cssanim {iš {kairės: 0px} į {kairę: 400px}}- animacijos-žaidimo būsena
Ši ypatybė nurodo, kad animacija bus grojama arba pristabdyta. Be to, kai animacija atnaujinama iš pauzės, ji pradedama ten, kur ji liko.Galimos vertės yra šios:
- žaidžia - Pateikti animaciją
- pristabdė - Pateikti animaciją pristabdytoje būsenoje.
Sintaksė:
animacijos-žaidimo būsena: pristabdyta | žaidžia
.anim {plotis: 100px aukštis: 100px fonas: šviesiai mėlynos spalvos padėtis: santykinis animacijos pavadinimas: cssanim animacijos trukmė: 3s animacijos vėlavimas: 2s animacijos užpildymo režimas: atgalinis krašto spindulys: 100%} @keyframes cssanim {0% {top: 0px background-color: orange} 50% {top: 0px background-color: green} 100% {top: 100pxbackground-color: blue}}- animacija
Tai vadinama animacijos stenografijos nuosavybe. Jis naudojamas švaresniam kodui. Kai priprantame prie visų animacijos ypatybių, patariama naudoti animacijos trumpinį, kad galėtume greičiau koduoti ir apibrėžti visas ypatybes vienoje eilutėje.
Sintaksė:
animacija: [animacijos pavadinimas] | [animacijos trukmė] | [animacijos laiko nustatymo funkcija] |[animacijos vėlavimas] [animacijos-iteracijos skaičius] | [animacijos kryptis] |[animacijos pildymo režimas] | [animacija-žaisti-būsena]
Visi animacijos efektai, kuriuos rodome aukščiau naudodami skirtingas animacijos ypatybes, gali būti pasiekti naudojant trumpinįanimacija nuosavybė.
kas yra simbolinė java
.anim {aukštis: 200 taškų pločio: 200 taškų fonas: šviesiai mėlynos spalvos padėtis: santykinis kraštinės spindulys: 100% animacijos pavadinimas: cssanim animacijos trukmė: 2s animacijos kryptis: įprasta animacijos atkūrimo būsena: pristabdyta} @ keyframes cssanim {0% {background: orange top: 0px} 50% {background: yellow left: 200px top: 200px} 100% {background: blue left: 100px}}Tai užbaigia visas animacijos ypatybes, kurias galima naudoti CSS. Turėtume išbandyti įvairias šių savybių variacijas, kad gautume aiškesnį vaizdą. Kai mums bus patogu, animacijos trumpinių turtas gali labai padėti parašyti švaresnį ir greitesnį kodą. Tai yra vienas iš svarbių įgūdžių, kuriuos reikia išmokti CSS žiniatinklio kūrėjams. Kadangi esame linkę daugiau dėmesio skirti ne statiniams, o judantiems objektams, animacijos gali padėti mums tai pasiekti ir sukurti puikius puikius tinklalapius.
Patikrinkite mūsų kuris ateina su instruktorių vedamomis tiesioginėmis treniruotėmis ir realių projektų patirtimi. Šie mokymai leidžia išmokti dirbti su išorinėmis ir išorinėmis interneto technologijomis. Tai apima mokymus apie žiniatinklio plėtrą, „jQuery“, „Angular“, „NodeJS“, „ExpressJS“ ir „MongoDB“.
Turite mums klausimą? Prašau tai paminėti tinklaraščio „Animacijos CSS“ komentarų skyriuje ir mes su jumis susisieksime.