Hvordan sette opp CSS -animasjon Keyframes

HTML -språket gir strukturen på websiden, og CSS gir design og formatering av den applikasjonen. Denne kombinasjonen lar deg også legge til animasjon, ettersom de animerte elementene ser mer attraktive ut sammenlignet med statiske elementer. Det lar også et element endre stilen sin gradvis.

Denne artikkelen vil guide hvordan vi kan bruke animasjon på elementene. Så la oss begynne!

Hva er CSS -animasjonsnøkkelrammer?

For å få animasjonen gjort, må vi binde animasjonen til HTML -elementet. For dette formålet, bruk nøkkelordet “@KeyFrames”Etterfulgt av animasjonsnavnet. Denne komponenten spesifiserer start og slutt på animasjonen.

Hvordan sette opp CSS -animasjon 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 et å ha klassenavnet “Main-div”.
  • Inne i diven, legg til en annen div med klassenavnet “IMG-Peng”.
  • Inne i denne img-peng div, legg til å plassere bildet. Denne taggen har tre attributter, "src”Attributt for å gi bildebanen,”alt”Er den alternative teksten som blir lagt til hvis bildet ikke vises, og“bredde”Attributt for å gi bredden på bildet.

Html

CSS

.Main-div
Bredde: 90%;
Høyde: 90px;
bakgrunnsfarge: RGB (67, 66, 87);
Margin: 20px Auto;
polstring: 10px;

I CSS, “.Main-div”Legges til for å få tilgang til Div -klassen. Egenskapene som brukes på den er forklart nedenfor:

• • “bredde”Eiendomsverdi definerer divens bredde.
  • “høyde”Eiendom brukes til å stille divens høyde.
  • “bakgrunnsfarge”Eiendom bruker farge på elementets bakgrunn.
  • “margin”Er satt som“20px auto”, Som indikerer plassen fra topp og bunn, og auto betyr lik plass fra venstre og høyre.
  • “polstring”Eiendomsverdi er tildelt som 10px, som bruker plass rundt elementets innhold.

Stil img-peng klasse

.img-peng
Bredde: 50px;
Høyde: 100px;
Posisjon: relativ;
Animasjon: Shake;
Animasjonsforhold: 2s;
Animasjonstiming-funksjon: 2s;
Animasjon-iteration-count: uendelig;

“.IMG-Peng”Brukes til å få tilgang til DIV -klassen, nevnt i HTML -filen ovenfor. Dette divelementet er stylet med egenskaper omtalt nedenfor:

• • “bredde”Eiendomsverdi brukes til å stille inn elementets bredde.
  • “høyde”Eiendomsverdi brukes til å stille inn elementets høyde.
  • “posisjon”Eiendom tildeles verdien”slektning”, Som betyr at den vil være plassert i forhold til dens normale stilling.
  • “animasjon”Navnet er gitt som“riste”. Du kan imidlertid navngi animasjon i henhold til kravet.
  • “Animasjonsforhold”Representerer varigheten av animasjonen, som er 2 sekunder.
  • “Animasjonstiming-funksjon”Tildeles en verdi på 2s som betyr på 2 sekunder, animasjonen er fullført.
  • “Animasjon-iteration-count”Er satt som uendelig, noe som betyr at denne animasjonen vil skje i uendelig tid.

Definere @keyframes med til og fra nøkkelord

@KeyFrames rister
fra
Topp: 50px;

til
Margin-Bottom: 200px;

Beskrivelsen av animasjonsnøkkelrammer satt til bildet er listet opp nedenfor:

• • “@KeyFrames rister”Henviser til animasjonsnavnet Shake etterfulgt av nøkkelordet @KeyFrames. Innenfor denne regelen er animasjonens oppførsel spesifisert.
  • Inne i de krøllete parentesene, “fra”Og“til”Nøkkelord spesifiserer forskjellige intervaller for å definere animasjonsatferden.
  • “topp”Eiendom tildeles verdien av 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 animasjonen oppføre seg annerledes med forskjellige intervaller. For å gjøre det, bruk animasjonsprosentene i @keyframes.

Spesifiser @KeyFrames med prosenter

@KeyFrames rister
0%
Venstre: -50px;

25%
Venstre: 50px;

50%
Venstre: -25px;

75%
Venstre: 25px;

100%
Venstre: 10px;

Så beskrivelsen av ovennevnte kodebit er nevnt her:

• • Prosentverdiene 0%, 25%, 50%, 75%og 100%representerer animasjonen med forskjellige intervaller.
  • Dessuten, med 0%, vil plassen til venstre for bildet være "-50px”. På 25%vil plassen til venstre være “50px”. Til 50%vil plassen til venstre være “-25px”. Ved 75%vil venstre plass være “25px”, Og når animasjonen er fullført (100%), vil venstre plass være“10px”.

Ovennevnte kode viser følgende animasjon:

La oss ta et annet eksempel for å se hvordan vi kan sette animasjoner til bildene.

Eksempel 2

I HTML, legg til et å ha klassenavnet “hovedside”. Inne i dette elementet, plasser ytterligere to div -tagger med klasser "Cloud1”Og“Cloud2”, Henholdsvis.

Html

CSS

kropp
Margin: 0;
polstring: 0;

I CSS vil vi tilordne følgende CSS -egenskaper til kroppselementet:

• • “margin”Eiendom som 0 spesifiserer ingen plass rundt elementet.
  • “polstring”Eiendom med verdien 0 spesifiserer ingen plass rundt elementets innhold.

Stil hoved-side div

.hovedside
Bakgrunnsbilde: URL (/Images/Wolf-Night.png);
Bakgrunnsrepetitt: No-Repeteat;
Bakgrunnsstørrelse: Deksel;
Høyde: 100VH;
Posisjon: relativ;
overløp: skjult;

Her:

• • “.hovedside”Brukes til å få tilgang til Div -klassen.
  • “bakgrunnsbilde”Eiendom tildeles verdien”URL (/bilder/ulv-natt.png)”Hvor bilder er mappen som inneholder bildet Wolf-Night.png.
  • “Bakgrunnsrepetitt”Eiendom tildeles verdien”Ingen repeter, som betyr at bildet vil vises en gang.
  • “bakgrunnsstørrelse”Er satt som en“dekke”For å fylle hele Div -elementet.
  • “høyde”Er 100VH som er 100% av utsiktshøyden.
  • “posisjon”Som slektning setter bildeposisjonen i forhold til dens nåværende beliggenhet.
  • “flyte”Eiendoms verdi er satt som skjult for å skjule den delen av bildet som er for stort til å passe inn i beholderen.

Style Cloud1 -klasse

.Cloud1
Bakgrunnsbilde: URL (/bilder/sky.png);
Bakgrunnsstørrelse: Inneholder;
Bakgrunnsrepetitt: No-Repeteat;
Posisjon: Absolutt;
Topp: 100px;
Bredde: 500px;
Høyde: 300px;
Animasjon: CloudAnimation1;
Animasjonsforhold: 70-tallet;
Animasjon-iteration-count: uendelig;

Div Class Cloud1 brukes med følgende forklarte egenskaper:

• • “.Cloud1”Brukes til å få tilgang til Div Class Cloud1.
  • “bakgrunnsbilde”Eiendom er satt som URL (/bilder/sky.png), der bilder er mappen som inneholder bildeskyen.png.
  • “bakgrunnsstørrelse”Med verdien”inneholde”Sikrer synligheten av bildet.
  • “Bakgrunnsrepetitt”Eiendom med verdien som“Ingen repeter”Viser bildet som ikke-gjentatt.
  • “posisjon”Som absolutte posisjoner bildet i forhold til foreldrenes element.
  • “topp”Eiendom setter bildet på 100px fra toppen.
  • “bredde”Eiendom brukes til å sette Div -elementets bredde til 500px.
  • “høyde”Eiendom brukes til å sette DIV -elementets høyde til 300px.
  • “animasjon”Tildeles navnet CloudAnimation1.
  • “Animasjonsforhold”Representerer varigheten av animasjonen, som er 70 sekunder.
  • “Animasjon-iteration-count”Tildeles verdien uendelig, som vil iterere animasjonen uendelige tider.

Så langt har vi brukt CSS-egenskapene til Div Class Hoved-PAGE og Cloud1. Nå, i neste avsnitt, vil vi style den neste divklassen som heter Cloud2.

Style Cloud2 -klasse

.Cloud2
Bakgrunnsbilde: URL (/bilder/sky.png);
Bakgrunnsstørrelse: Inneholder;
Bakgrunnsrepetitt: No-Repeteat;
Posisjon: Absolutt;
Topp: 50px;
Bredde: 200px;
Høyde: 300px;
Animasjon: CloudAnimation2;
Animasjonsforhold: 15-tallet;
Animasjon-iteration-count: uendelig;

Div Class Cloud2 brukes med egenskapene som er forklart nedenfor:

• • “.Cloud2”Brukes til å få tilgang til klasse Cloud2.
  • “bakgrunnsbilde”Eiendom er satt som URL (/bilder/sky.png), der bildet er en mappe som inneholder bildeskyen.png.
  • “bakgrunnsstørrelse”Inneholder en verdi sørger for at synligheten av bildet.
  • “Bakgrunnsrepetitt”Eiendom med verdien som ikke er noen-repetisjon viser bildet som ikke-repetisjon.
  • “posisjon”Som absolutte posisjoner bildet i forhold til foreldrenes element.
  • “topp”Eiendom setter bildet på 100px fra toppen.
  • “bredde”Eiendom brukes til å sette bredden på DIV -elementet.
  • “høyde”Eiendom brukes til å sette høyden på DIV -elementet.
  • “animasjon”Tildeles navnet CloudAnimation2.
  • “Animasjonsforhold”Representerer varigheten av animasjonen.
  • “Animasjon-iteration-count”Tildeles verdien uendelig, som vil iterere animasjonen uendelige tider.

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 blir fulgt av nøkkelordet @KeyFrames som brukes til å spesifisere overgang.
  • @KeyFrames -nøkkelordet spesifiserer hvordan animasjonen gjøres fra start til slutt på skybildene.
  • “til”Og“fra”Nøkkelord Angi sky1 vil bevege seg fra 100% til 0px på skjermen.

Spesifiser @KeyFrames for CloudAnimation2

@KeyFrames CloudAnimation2
0%
Venstre: 0%;

100%
Venstre: 100%;

Div Class 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%”Representere starten og slutten av animasjonen.
  • Ved 0% av animasjonen vil skyen være til venstre med verdien som 0%, og den vil gradvis gå til 100% av bredden.

Produksjon

Det er kult! Vi har diskutert hvordan vi kan spesifisere animasjon til elementene ved å bruke nøkkelordet @KeyFrames vellykket.

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, animasjonsstiler og nøkkelrammer. Animasjonsstiler representerer forskjellige egenskaper som deres navn, animasjonsforsyning, animasjon-iteration-count og mer. Mens nøkkelramme -komponenten definerer begynnelsen og slutten av animasjonen. Denne guiden utdypet hvordan du konfigurerer animasjonskeyframes med eksempler.