HTML-keel pakub veebilehe struktuuri ja CSS pakub selle rakenduse kujundust ja vormindamist. See kombinatsioon võimaldab teil lisada ka animatsiooni, kuna animeeritud elemendid näevad staatiliste elementidega võrreldes atraktiivsemad. Samuti võimaldab see elemendil oma stiili järk-järgult muuta.
See artikkel juhendab, kuidas saame elementidele animatsiooni rakendada. Niisiis, alustame!
Mis on CSS-animatsiooni võtmekaadrid?
Animatsiooni tegemiseks peame animatsiooni siduma HTML-elemendiga. Selleks kasutage märksõna ' @keyframes ” järgneb animatsiooni nimi. See komponent määrab animatsiooni alguse ja lõpu.
Kuidas seadistada CSS-animatsiooni võtmekaadreid?
Animatsiooni võtmekaadrite seadistamiseks CSS-is vaatame läbi kaks näidet.
Näide 1
Animatsiooni võtmekaadrite seadistamiseks CSS-is toimige järgmiselt.
-
- Lisage , mille klassi nimi on ' main-div ”.
- Divi sisse lisage teine div klassi nimega ' img-peng ”.
- Selle img-peng div sisse lisage pildi paigutamiseks
. Sellel sildil on kolm atribuuti, ' src ' atribuut kujutise tee esitamiseks, ' kõike ” on alternatiivne tekst, mis lisatakse, kui pilti ei kuvata, ja „ laius ” atribuut pildi laiuse kuvamiseks.
HTML
< div klass = 'main-div' >
< div klass = 'img-peng' >
< img src = 'images/pingviin.png' kõike = 'pingviin' laius = '100' >
div >
div >
.main-div {
CSS
laius: 90 % ;
kõrgus: 90 pikslit;
taustavärv: rgb ( 67 , 66 , 87 ) ;
veeris: 20px auto;
polster: 10px;
}
CSS-is on ' .main-div ” lisatakse, et pääseda juurde klassi div. Sellele rakendatud omadusi selgitatakse allpool:-
- “ laius ” atribuudi väärtus määrab div laiuse.
- “ kõrgus ” atribuuti kasutatakse div kõrguse määramiseks.
- “ taustavärv ” atribuut rakendab elemendi taustale värvi.
- “ marginaal ' on seatud kui ' 20px auto ”, mis tähistab ruumi ülevalt ja alt ning auto tähendab võrdset ruumi vasakult ja paremalt.
- “ polsterdus ” atribuudi väärtuseks on määratud 10 pikslit, mis rakendab elemendi sisu ümber ruumi.
Stiili img-pengi klass
.img-peng {
laius: 50 pikslit;
kõrgus: 100 pikslit;
asend: suhteline;
animatsioon: raputada;
animatsiooni kestus: 2s;
animatsiooni-ajastamise funktsioon: 2s;
animatsiooni iteratsiooni arv: lõpmatu;
}
' .img-peng ” kasutatakse ülaltoodud HTML-failis mainitud div-klassile juurdepääsuks. See div element on kujundatud järgmiste omadustega:-
- “ laius ” atribuudi väärtust kasutatakse elemendi laiuse määramiseks.
- “ kõrgus ” atribuudi väärtust kasutatakse elemendi kõrguse määramiseks.
- “ positsiooni 'varale omistatakse väärtus' sugulane ”, mis tähendab, et see asetseb oma tavaasendi suhtes.
- “ animatsioon ' nimi antakse kui ' raputama ”. Animatsiooni saab aga vastavalt nõudele nimetada.
- “ animatsioon-kestvus ” tähistab animatsiooni kestust, mis on 2 sekundit.
- “ animatsiooni-ajastamise-funktsioon ” on määratud väärtus 2s, mis tähendab, et 2 sekundi pärast on animatsioon lõppenud.
- “ animatsiooni iteratsioonide arv ” on määratud lõpmatuks, mis tähendab, et see animatsioon toimub lõpmatu aja jooksul.
Määrake @keyframes märksõnadega to ja alates
@ võtmekaadrid värisevad {
alates {
ülemine: 50 pikslit;
}
juurde {
veeris-alumine: 200px;
}
}
Pildile seatud animatsiooni võtmekaadrite kirjeldus on loetletud allpool:-
- “ @keyframes raputab ” viitab animatsiooni nime raputamisele, millele järgneb märksõna @keyframes. Selle reegli raames määratakse animatsiooni käitumine.
- Selle lokkis sulgudes on ' alates ” ja „ juurde ” märksõnad määravad animatsiooni käitumise määratlemiseks erinevad intervallid.
- ' üleval ” atribuudile on määratud väärtus 50 pikslit, mis tähendab, et animatsioon algab 50 pikslist ekraani ülaosast ja jätkub 200 pikslini ekraani allosas.
Selle tulemusena näete järgmist väljundit:
Nüüd laske animatsioonil erinevate intervallidega erinevalt käituda. Selleks kasutage @keyframes animatsiooni protsente.Määrake @keyframes koos protsentidega
@ võtmekaadrid värisevad {
0 % {
vasakule: -50 pikslit ;
}
25 % {
vasakul: 50 pikslit;
}
viiskümmend % {
vasakule: -25 pikslit ;
}
75 % {
vasakul: 25px;
}
100 % {
vasakul: 10px;
}
}
Seega mainitakse ülaltoodud koodilõigu kirjeldust siin:-
- Protsentuaalsed väärtused 0%, 25%, 50%, 75% ja 100% tähistavad animatsiooni erinevate intervallidega.
- Lisaks on 0% juures pildi vasakpoolne tühik ' -50 pikslit ”. 25% juures on vasakpoolne tühik ' 50 pikslit ”. 50% juures on vasakpoolne tühik ' -25 pikslit ”. 75% juures on vasak ruum ' 25 pikslit ” ja kui animatsioon on lõppenud (100%), on vasakpoolne tühik „ 10 pikslit ”.
Ülaltoodud kood kuvab järgmise animatsiooni:
Võtame veel ühe näite, et näha, kuidas saame piltidele animatsioone seada.Näide 2
HTML-is lisage
, mille klassi nimi on ' avaleht ”. Asetage selleelemendi sisse veel kaks div-märgendit klassidega ' pilv1 ” ja „ pilv2 ”, vastavalt.HTML
< div klass = 'pealeht' >
< div klass = 'pilv1' > div >
< div klass = 'pilv2' > div >
div >
keha {
CSS
marginaal: 0 ;
polsterdus: 0 ;
}
CSS-is määrame kehaelemendile järgmised CSS-i omadused:-
- “ marginaal ” atribuut 0 ei määra elemendi ümber tühikut.
- “ polsterdus ” atribuut väärtusega 0 ei määra elemendi sisu ümber tühikut.
Pealehe stiil
.pealeht {
taustapilt: url ( / pilte / hundiöö.png ) ;
background-repeat: no-repeat;
tausta suurus: kaas;
kõrgus: 100vh;
asend: suhteline;
ülevool: peidetud;
}
Siin:-
- “ .pealeht ” kasutatakse div-klassi juurde pääsemiseks.
- “ taustapilt 'varale omistatakse väärtus' url(/images/wolf-night.png) ” kus images on kaust, mis sisaldab pilti wolf-night.png.
- “ taustakordus 'varale omistatakse väärtus' ei-korda , mis tähendab, et pilti kuvatakse üks kord.
- “ tausta suurus ' on seatud kui ' kaas ', et täita kogu div element.
- “ kõrgus ” on 100vh, mis on 100% vaateakna kõrgusest.
- “ positsiooni ” suhtelisena määrab pildi asukoha selle praeguse asukoha suhtes.
- “ ülevool ” atribuudi väärtus määratakse peidetuks, et peita pildi osa, mis on konteinerisse mahutamiseks liiga suur.
Stiilipilv1 klass
.pilv1 {
taustapilt: url ( / pilte / cloud.png ) ;
background-size: sisaldavad;
background-repeat: no-repeat;
positsioon: absoluutne;
ülemine: 100 pikslit;
laius: 500 pikslit;
kõrgus: 300 pikslit;
animatsioon: cloudanimation1;
animatsiooni kestus: 70s;
animatsiooni iteratsiooni arv: lõpmatu;
}
Div klassi cloud1 rakendatakse järgmiste selgitatud omadustega:-
- “ .pilv1 ” kasutatakse juurdepääsuks div klassile cloud1.
- “ taustapilt ” atribuut on seatud kui url(/images/cloud.png), kus pildid on kaust, mis sisaldab pilti cloud.png.
- “ tausta suurus ' väärtusega ' sisaldama ” tagab pildi nähtavuse.
- “ taustakordus ' atribuut väärtusega ' ei-korda ” kuvab pilti kordumatuna.
- “ positsiooni ” kui absoluutne positsioneerib kujutise selle emaelemendi suhtes.
- “ üleval ” atribuut määrab pildi ülaosast 100 pikslile.
- “ laius ” atribuuti kasutatakse div elemendi laiuse määramiseks 500 pikslit.
- “ kõrgus ” atribuuti kasutatakse div elemendi kõrguse määramiseks 300 pikslit.
- “ animatsioon ” on määratud nimi cloudanimation1.
- “ animatsioon-kestvus ” tähistab animatsiooni kestust, mis on 70 sekundit.
- “ animatsioon-iteratsiooni-loendus ” on määratud väärtus lõpmatu, mis kordab animatsiooni lõpmatuid kordi.
Seni oleme rakendanud CSS-i atribuute div-klassi avalehele ja cloud1-le. Nüüd, järgmises jaotises, kujundame järgmise div klassi nimega cloud2.
Stiilipilv2 klass
.pilv2 {
taustapilt: url ( / pilte / cloud.png ) ;
background-size: sisaldavad;
background-repeat: no-repeat;
positsioon: absoluutne;
ülemine: 50 pikslit;
laius: 200 pikslit;
kõrgus: 300 pikslit;
animatsioon: cloudanimation2;
animatsiooni kestus: 15s;
animatsiooni iteratsiooni arv: lõpmatu;
}
Div-klassi cloud2 rakendatakse järgmiste omadustega:-
- “ .pilv2 ” kasutatakse juurdepääsuks klassi pilv2-le.
- “ taustapilt ” atribuut on seatud kui url(/images/cloud.png), kus pilt on kaust, mis sisaldab pilti cloud.png.
- “ tausta suurus ” sisaldab väärtust, mis tagab pildi nähtavuse.
- “ taustakordus ” atribuut, mille väärtuseks on seatud no-repeat, kuvab pildi kui mittekorda.
- “ positsiooni ” kui absoluutne positsioneerib kujutise selle emaelemendi suhtes.
- “ üleval ” atribuut seab pildi ülaosast 100 pikslile.
- “ laius ” atribuuti kasutatakse div-elemendi laiuse määramiseks.
- “ kõrgus ” atribuuti kasutatakse div-elemendi kõrguse määramiseks.
- “ animatsioon ” on määratud nimi cloudanimation2.
- “ animatsioon-kestvus ” tähistab animatsiooni kestust.
- “ animatsiooni iteratsioonide arv ” on määratud väärtus lõpmatu, mis kordab animatsiooni lõpmatuid kordi.
Määrake @keyframes pilvanimatsiooni1 jaoks
@ võtmekaadrite pilvanimatsioon1 {
juurde {
vasakul: 0px;
}
alates {
vasakule: 100 % ;
}
}
Pilv1 div on seotud animatsiooniga, mida kirjeldatakse allpool:-
- “ @keyframes cloudanimation1 ” animatsiooni cloudanimation1 nimele järgneb ülemineku määramiseks kasutatav märksõna @keyframes.
- Märksõna @keyframes määrab, kuidas pilvepiltidel animatsiooni algusest lõpuni tehakse.
- ' juurde ” ja „ alates ” Märksõnad täpsustavad, et cloud1 liigub 100%-lt ekraani 0px-le.
Pilveanimatsiooni2 jaoks määrake @keyframes
@ võtmekaadrite pilvanimatsioon2 {
0 % {
vasakule: 0 % ;
}
100 % {
vasakule: 100 % ;
}
}
Div klass cloud2 on seotud animatsiooniga, mida on kirjeldatud allpool:-
- “ @keyframes cloudanimation2 ” tähistab animatsiooni nime cloudanimation2, millele järgneb märksõna @keyframes, mida kasutatakse animatsiooni määramiseks.
- ' 0% ” ja „ 100% ” tähistavad animatsiooni algust ja lõppu.
- Animatsiooni 0% korral oleks pilv vasakul, väärtuseks seatud 0%, ja see liigub järk-järgult 100% laiusele.
Väljund
See on lahe! Oleme arutanud, kuidas saaksime märksõna @keyframes abil elementidele animatsiooni edukalt määrata.Järeldus
CSS võimaldab meil HTML-i elementidele stiile rakendada. CSS-i animatsioon teostab üleminekuid ühelt stiililt teisele. See koosneb kahest komponendist, animatsiooni stiilidest ja võtmekaadritest. Animatsioonistiilid esindavad erinevaid omadusi, nagu nende nimi, animatsiooni kestus, animatsiooni iteratsiooni arv ja palju muud. Võtmekaadri komponent määrab animatsiooni alguse ja lõpu. Selles juhendis kirjeldatakse üksikasjalikult, kuidas seadistada animatsiooni võtmekaadreid koos näidetega.
- Lisage