HTML-språket gir strukturen til nettsiden, og CSS gir utformingen og formateringen av den applikasjonen. Denne kombinasjonen lar deg også legge til animasjon, siden de animerte elementene ser mer attraktive ut sammenlignet med statiske elementer. Den lar også et element endre stilen gradvis.
Denne artikkelen vil veilede hvordan vi kan bruke animasjon på elementene. Så la oss begynne!
Hva er CSS Animation Keyframes?
For å få utført animasjonen må vi binde animasjonen til HTML-elementet. For dette formålet, bruk søkeordet ' @keyframes ” etterfulgt av animasjonsnavnet. Denne komponenten spesifiserer starten og slutten av animasjonen.
Hvordan sette opp CSS Animation Keyframes?
For å sette opp animasjonsnøkkelrammer i CSS, vil vi gå gjennom to eksempler.
Eksempel 1
For å sette opp animasjonsnøkkelrammer i CSS, utfør følgende trinn:
-
- Legg til en med klassenavnet ' hoved-div '.
- Inne i div, legg til en annen div med klassenavnet ' img-peng '.
- Inne i denne img-peng div, legg til
for å plassere bildet. Denne taggen har tre attributter, ' src '-attributt for å gi bildebanen, ' alt ' er den alternative teksten som legges til hvis bildet ikke vises, og ' bredde ”-attributt for å angi bredden på bildet.
HTML
< div klasse = 'hoved-div' >
< div klasse = 'img-peng' >
< img src = 'images/penguin.png' alt = 'pingvin' bredde = '100' >
div >
div >
.main-div {
CSS
bredde: 90 % ;
høyde: 90px;
bakgrunnsfarge: rgb ( 67 , 66 , 87 ) ;
margin: 20px auto;
polstring: 10px;
}
I CSS er ' .main-div ” legges til for å få tilgang til div-klassen. Egenskapene brukt på det er forklart nedenfor:-
- ' bredde ” egenskapsverdi definerer div-ens bredde.
- ' høyde ”-egenskapen brukes til å angi div-høyden.
- ' bakgrunnsfarge ”-egenskapen bruker farge på elementets bakgrunn.
- ' margin ' er satt som ' 20px bil ”, som indikerer mellomrommet fra topp og bunn, og auto betyr lik mellomrom fra venstre og høyre.
- ' polstring ” egenskapsverdien er tilordnet som 10px, som bruker plass rundt elementets innhold.
Stil img-peng klasse
.img-peng {
bredde: 50px;
høyde: 100px;
stilling: pårørende;
animasjon: riste;
animasjon-varighet: 2s;
animasjon-timing-funksjon: 2s;
animasjon-iterasjon-telling: uendelig;
}
« .img-peng ” brukes for å få tilgang til div-klassen, nevnt i HTML-filen ovenfor. Dette div-elementet er stylet med egenskaper omtalt nedenfor:-
- ' bredde ” egenskapsverdien brukes til å angi elementets bredde.
- ' høyde ” egenskapsverdien brukes til å angi elementets høyde.
- ' stilling ' egenskapen er tildelt verdien ' slektning ”, som betyr at den vil bli plassert i forhold til sin normale posisjon.
- ' animasjon navnet er gitt som riste '. Du kan imidlertid navngi animasjon i henhold til kravet.
- ' animasjon-varighet ” representerer varigheten av animasjonen, som er 2 sekunder.
- ' animasjon-timing-funksjon ” er tildelt en verdi på 2s som betyr at animasjonen er fullført på 2 sekunder.
- ' animasjon-iterasjon-telling ” er satt som uendelig, noe som betyr at denne animasjonen vil skje i uendelig tid.
Definer @keyframes Med til og fra nøkkelord
@ keyframes rister {
fra {
topp: 50px;
}
til {
marg-bunn: 200px;
}
}
Beskrivelsen av animasjonsnøkkelframes satt til bildet er oppført nedenfor:-
- ' @keyframes rister ” refererer til animasjonsnavnet shake etterfulgt av nøkkelordet @keyframes. Innenfor denne regelen er oppførselen til animasjonen spesifisert.
- Innenfor de krøllete parentesene er ' fra ' og ' til ” nøkkelord spesifiserer ulike intervaller for å definere animasjonsatferden.
- « topp ”-egenskapen tildeles verdien 50px, noe som betyr at animasjonen starter fra 50px fra toppen av skjermen og fortsetter til 200px nederst.
Som et resultat vil du se følgende utgang:
La nå animasjonen oppføre seg annerledes med forskjellige intervaller. For å gjøre det, bruk animasjonsprosentene i @keyframes.Spesifiser @keyframes med prosenter
@ keyframes rister {
0 % {
venstre: -50 px ;
}
25 % {
venstre: 50px;
}
femti % {
venstre: -25 piksler ;
}
75 % {
venstre: 25px;
}
100 % {
venstre: 10px;
}
}
Så beskrivelsen av kodebiten ovenfor er nevnt her:-
- Prosentverdiene 0 %, 25 %, 50 %, 75 % og 100 % representerer animasjonen ved forskjellige intervaller.
- Dessuten, ved 0 %, vil plassen til venstre i bildet være ' -50 px '. Ved 25 % vil plassen til venstre være ' 50 piksler '. Ved 50 % vil plassen til venstre være ' -25 piksler '. Ved 75 % vil venstre plass være ' 25 piksler ', og når animasjonen er fullført (100%), vil den venstre plassen være ' 10 piksler '.
Koden ovenfor viser følgende animasjon:
La oss ta et annet eksempel for å se hvordan vi kan sette animasjoner til bildene.Eksempel 2
I HTML legger du til en
med klassenavnet ' hovedside '. Inne i dette-elementet, plasser ytterligere to div-tagger med klasser ' sky1 ' og ' sky2 ', henholdsvis.HTML
< div klasse = 'hovedside' >
< div klasse = 'cloud1' > div >
< div klasse = 'cloud2' > div >
div >
kropp {
CSS
margin: 0 ;
polstring: 0 ;
}
I CSS vil vi tilordne følgende CSS-egenskaper til body-elementet:-
- ' margin ” egenskap som 0 angir ingen mellomrom rundt elementet.
- ' polstring ” egenskap med verdien 0 spesifiserer ingen plass rundt elementets innhold.
Stil hovedside div
.hovedside {
bakgrunnsbilde: url ( / Bilder / ulv-natt.png ) ;
bakgrunns-gjenta: ikke-gjenta;
bakgrunnsstørrelse: cover;
høyde: 100vh;
stilling: pårørende;
overløp: skjult;
}
Her:-
- ' .hovedside ' brukes for å få tilgang til div-klassen.
- ' bakgrunnsbilde ' egenskapen er tildelt verdien ' url(/images/wolf-night.png) ” der bilder er mappen som inneholder bildet wolf-night.png.
- ' bakgrunnsgjenta ' egenskapen er tildelt verdien ' ingen gjentakelse , som betyr at bildet vil vises én gang.
- ' bakgrunnsstørrelse ' er satt som en ' dekke ' for å fylle hele div-elementet.
- ' høyde ” er 100vh som er 100 % av visningsportens høyde.
- ' stilling ” som relativ setter bildeposisjonen i forhold til gjeldende plassering.
- ' flyte ” egenskapens verdi er satt som skjult for å skjule den delen av bildet som er for stor til å passe inn i beholderen.
Stil cloud1 klasse
.cloud1 {
bakgrunnsbilde: url ( / Bilder / cloud.png ) ;
bakgrunnsstørrelse: inneholde;
bakgrunns-gjenta: ikke-gjenta;
posisjon: absolutt;
topp: 100px;
bredde: 500px;
høyde: 300px;
animasjon: cloudanimation1;
animasjon-varighet: 70s;
animasjon-iterasjon-telling: uendelig;
}
Div-klassen cloud1 brukes med følgende forklarte egenskaper:-
- ' .cloud1 ' brukes for å få tilgang til div-klassen cloud1.
- ' bakgrunnsbilde ”-egenskapen er satt som url(/images/cloud.png), der bilder er mappen som inneholder bildet cloud.png.
- ' bakgrunnsstørrelse ' med verdien ' inneholde ” sikrer synligheten til bildet.
- ' bakgrunnsgjenta ' egenskap med verdien satt som ' ingen gjentakelse ” viser bildet som ikke-gjentatt.
- ' stilling ” som absolutt plasserer bildet i forhold til det overordnede elementet.
- ' topp ”-egenskapen setter bildet til 100px fra toppen.
- ' bredde ”-egenskapen brukes for å sette div-elementets bredde til 500px.
- ' høyde ”-egenskapen brukes for å sette div-elementets høyde til 300px.
- ' animasjon ” er tildelt navnet cloudanimation1.
- ' animasjon-varighet ” representerer varigheten av animasjonen, som er 70 sekunder.
- ' animasjon-iterasjon-telling ” er tildelt verdien uendelig, som vil iterere animasjonen uendelig mange ganger.
Så langt har vi brukt CSS-egenskapene på div-klassens hovedside og cloud1. Nå, i neste seksjon, vil vi style den neste div-klassen kalt cloud2.
Stil cloud2 klasse
.cloud2 {
bakgrunnsbilde: url ( / Bilder / cloud.png ) ;
bakgrunnsstørrelse: inneholde;
bakgrunns-gjenta: ikke-gjenta;
posisjon: absolutt;
topp: 50px;
bredde: 200px;
høyde: 300px;
animasjon: cloudanimation2;
animasjon-varighet: 15s;
animasjon-iterasjon-telling: uendelig;
}
Div-klassen cloud2 brukes med egenskapene som er forklart nedenfor:-
- ' .cloud2 ' brukes for å få tilgang til klasseskyen2.
- ' bakgrunnsbilde ”-egenskapen er satt som url(/images/cloud.png), der bildet er en mappe som inneholder bildet cloud.png.
- ' bakgrunnsstørrelse ” inneholder en verdi sørger for synligheten til bildet.
- ' bakgrunnsgjenta ”-egenskapen med verdien satt som ingen repetisjon viser bildet som ikke-gjentakelse.
- ' stilling ” som absolutt plasserer bildet i forhold til det overordnede elementet.
- ' topp ”-egenskapen setter bildet til 100px fra toppen.
- ' bredde ”-egenskapen brukes til å angi bredden på div-elementet.
- ' høyde ”-egenskapen brukes til å angi høyden på div-elementet.
- ' animasjon ” er tildelt navnet cloudanimation2.
- ' animasjon-varighet ” representerer varigheten av animasjonen.
- ' animasjon-iterasjon-telling ” er tildelt verdien uendelig, som vil iterere animasjonen uendelig mange ganger.
Spesifiser @keyframes for cloudanimation1
@ keyframes cloudanimation1 {
til {
venstre: 0px;
}
fra {
venstre: 100 % ;
}
}
Cloud1 div er bundet med animasjon som er beskrevet nedenfor:-
- ' @keyframes cloudanimation1 ” navnet på animasjon cloudanimation1 etterfølges av nøkkelordet @keyframes som brukes til å spesifisere overgang.
- Nøkkelordet @keyframes spesifiserer hvordan animasjonen gjøres fra start til slutt på skybildene.
- « til ' og ' fra ” nøkkelord spesifiserer at cloud1 vil flytte fra 100 % til 0px på skjermen.
Spesifiser @keyframes for cloudanimation2
@ keyframes cloudanimation2 {
0 % {
venstre: 0 % ;
}
100 % {
venstre: 100 % ;
}
}
Div-klassen cloud2 er assosiert med animasjonen som er forklart nedenfor:-
- ' @keyframes cloudanimation2 ” representerer animasjonsnavnet cloudanimation2 etterfulgt av nøkkelordet @keyframes som brukes til å spesifisere animasjon.
- « 0 % ' og ' 100 % ” representerer starten og slutten av animasjonen.
- Ved 0 % av animasjonen vil skyen være til venstre med verdien satt til 0 %, og den vil gradvis bevege seg til 100 % av bredden.
Produksjon
Det er kult! Vi har diskutert hvordan vi kan spesifisere animasjon til elementene ved hjelp av nøkkelordet @keyframes.Konklusjon
CSS tillater oss å bruke stiler på HTML-elementer. Animasjonen i CSS utfører overganger fra en stil til en annen. Den består av to komponenter, animasjonsstilene og nøkkelbildene. Animasjonsstiler representerer forskjellige egenskaper, for eksempel navn, animasjonsvarighet, animasjon-iterasjon-antall og mer. Mens keyframe-komponenten definerer begynnelsen og slutten av animasjonen. Denne veiledningen utdypet hvordan du setter opp animasjonsnøkkelrammer med eksempler.
- Legg til en