HTML-sproget giver strukturen på websiden, og CSS giver designet og formateringen af denne applikation. Denne kombination giver dig også mulighed for at tilføje animation, da de animerede elementer ser mere attraktive ud sammenlignet med statiske elementer. Det lader også et element ændre sin stil gradvist.
Denne artikel vil guide, hvordan vi kan anvende animation til elementerne. Så lad os begynde!
Hvad er CSS Animation Keyframes?
For at få lavet animationen skal vi binde animationen til HTML-elementet. Til dette formål skal du bruge søgeordet ' @keyframes ” efterfulgt af animationsnavnet. Denne komponent angiver starten og slutningen af animationen.
Hvordan opsætter man CSS Animation Keyframes?
For at opsætte animationskeyframes i CSS vil vi gennemgå to eksempler.
Eksempel 1
Udfør følgende trin for at opsætte animationskeyframes i CSS:
-
- Tilføj en med klassenavnet ' hoved-div ”.
- Inde i div, tilføje en anden div med klassenavnet ' img-peng ”.
- Tilføj
i denne img-peng div for at placere billedet. Dette tag har tre attributter, ' src ' attribut for at angive billedstien, ' alt ' er den alternative tekst, der tilføjes, hvis billedet ikke vises, og ' bredde ” attribut for at angive bredden af billedet.
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øjde: 90px;
baggrundsfarve: rgb ( 67 , 66 , 87 ) ;
margin: 20px auto;
polstring: 10px;
}
I CSS er ' .main-div ” tilføjes for at få adgang til div-klassen. De egenskaber, der anvendes på det, er forklaret nedenfor:-
- “ bredde ” egenskabsværdi definerer div'ens bredde.
- “ højde egenskaben bruges til at indstille div'ens højde.
- “ baggrundsfarve ” egenskab anvender farve på elementets baggrund.
- “ margen ' er sat som ' 20px bil ”, som angiver mellemrummet fra top og bund, og auto betyder lige stor plads fra venstre og højre.
- “ polstring ” egenskabsværdien er tildelt som 10px, som anvender plads omkring elementets indhold.
Stil img-peng klasse
.img-peng {
bredde: 50px;
højde: 100px;
stilling: relativ;
animation: ryste;
animation-varighed: 2s;
animation-timing-funktion: 2s;
animation-iteration-count: uendelig;
}
Det ' .img-peng ” bruges til at få adgang til div-klassen, nævnt i ovenstående HTML-fil. Dette div-element er stylet med egenskaber beskrevet nedenfor:-
- “ bredde ” egenskabsværdien bruges til at indstille elementets bredde.
- “ højde ” egenskabsværdien bruges til at indstille elementets højde.
- “ position ' egenskaben tildeles værdien ' i forhold ”, hvilket betyder, at den vil blive placeret i forhold til sin normale position.
- “ animation ' navn er angivet som ' ryste ”. Du kan dog navngive animation efter kravet.
- “ animation-varighed ” repræsenterer varigheden af animationen, som er 2 sekunder.
- “ animation-timing-funktion ” er tildelt en værdi på 2s, hvilket betyder, at animationen er afsluttet på 2 sekunder.
- “ animation-iteration-tæller ” er sat som uendelig, hvilket betyder, at denne animation vil forekomme i uendelig tid.
Definer @keyframes Med til og fra nøgleord
@ keyframes ryster {
fra {
top: 50px;
}
til {
margin-bund: 200px;
}
}
Beskrivelsen af de animerede keyframes indstillet til billedet er angivet nedenfor:-
- “ @keyframes ryster ” refererer til animationsnavnet shake efterfulgt af nøgleordet @keyframes. Inden for denne regel er animationens adfærd specificeret.
- Inden for de krøllede parenteser er ' fra ' og ' til ” nøgleord angiver forskellige intervaller for at definere animationsadfærden.
- Det ' top ” egenskaben tildeles værdien 50px, hvilket betyder, at animationen starter fra 50px fra toppen af skærmen og fortsætter til 200px nederst.
Som et resultat vil du se følgende output:
Lad nu animationen opføre sig anderledes med forskellige intervaller. For at gøre det skal du bruge animationsprocenterne i @keyframes.Angiv @keyframes med procenter
@ keyframes ryster {
0 % {
venstre: -50 px ;
}
25 % {
venstre: 50px;
}
halvtreds % {
venstre: -25px ;
}
75 % {
venstre: 25px;
}
100 % {
venstre: 10px;
}
}
Så beskrivelsen af ovenstående kodestykke er nævnt her:-
- Procentværdierne 0 %, 25 %, 50 %, 75 % og 100 % repræsenterer animationen med forskellige intervaller.
- Desuden vil pladsen til venstre for billedet ved 0% være ' -50 px ”. Ved 25 % vil pladsen til venstre være ' 50 px ”. Ved 50 % vil pladsen til venstre være ' -25px ”. Ved 75 % vil det venstre mellemrum være ' 25 px ', og når animationen er færdig (100%), vil det venstre mellemrum være ' 10px ”.
Ovenstående kode viser følgende animation:
Lad os tage et andet eksempel for at se, hvordan vi kan indstille animationer til billederne.Eksempel 2
Tilføj en
i HTML med klassenavnet ' Forside ”. Inde i dette-element skal du placere yderligere to div-tags med klasser ' sky1 ' og ' sky 2 ', henholdsvis.HTML
< div klasse = 'Forside' >
< div klasse = 'sky1' > div >
< div klasse = 'sky2' > div >
div >
legeme {
CSS
margin: 0 ;
polstring: 0 ;
}
I CSS vil vi tildele følgende CSS-egenskaber til body-elementet:-
- “ margen ” egenskab som 0 angiver intet mellemrum omkring elementet.
- “ polstring ” egenskab med værdien 0 angiver intet mellemrum omkring elementets indhold.
Style hovedside div
.Forside {
baggrundsbillede: url ( / billeder / wolf-night.png ) ;
baggrund-gentag: ingen-gentagelse;
baggrundsstørrelse: cover;
højde: 100vh;
stilling: relativ;
overløb: skjult;
}
Her:-
- “ .Forside ” bruges til at få adgang til div-klassen.
- “ baggrundsbillede ' egenskaben tildeles værdien ' url(/images/wolf-night.png) ” hvor billeder er mappen, der indeholder billedet wolf-night.png.
- “ baggrund-gentag ' egenskaben tildeles værdien ' ingen gentagelse , hvilket betyder, at billedet vil blive vist én gang.
- “ baggrundsstørrelse ' er indstillet som en ' dække over ” for at udfylde hele div-elementet.
- “ højde ” er 100vh, hvilket er 100% af visningsportens højde.
- “ position ” som relativ indstiller billedets position i forhold til dets aktuelle placering.
- “ flyde over ” egenskabens værdi er angivet som skjult for at skjule den del af billedet, der er for stor til at passe ind i beholderen.
Style cloud1 klasse
.cloud1 {
baggrundsbillede: url ( / billeder / cloud.png ) ;
baggrundsstørrelse: indeholde;
baggrund-gentag: ingen-gentagelse;
position: absolut;
top: 100px;
bredde: 500px;
højde: 300px;
animation: cloudanimation1;
animation-varighed: 70'erne;
animation-iteration-count: uendelig;
}
div-klassen cloud1 anvendes med følgende forklarede egenskaber:-
- “ .cloud1 ” bruges til at få adgang til div-klassen cloud1.
- “ baggrundsbillede ” egenskab er indstillet som url(/images/cloud.png), hvor billeder er mappen, der indeholder billedet cloud.png.
- “ baggrundsstørrelse ' med værdien ' indeholde ” sikrer billedets synlighed.
- “ baggrund-gentag ' egenskab med værdien angivet som ' ingen gentagelse ” viser billedet som ikke-gentaget.
- “ position ” som absolut positionerer billedet i forhold til dets overordnede element.
- “ top egenskaben indstiller billedet til 100px fra toppen.
- “ bredde egenskaben bruges til at indstille div-elementets bredde til 500px.
- “ højde ” egenskaben bruges til at indstille div-elementets højde til 300px.
- “ animation ” tildeles navnet cloudanimation1.
- “ animation-varighed ” repræsenterer varigheden af animationen, som er 70 sekunder.
- “ animation-iteration-tæller ” tildeles værdien uendelig, hvilket vil gentage animationen uendeligt mange gange.
Indtil videre har vi anvendt CSS-egenskaberne til div-klassens hovedside og cloud1. Nu, i næste afsnit, vil vi style den næste div-klasse ved navn cloud2.
Style cloud2 klasse
.cloud2 {
baggrundsbillede: url ( / billeder / cloud.png ) ;
baggrundsstørrelse: indeholde;
baggrund-gentag: ingen gentagelse;
position: absolut;
top: 50px;
bredde: 200px;
højde: 300px;
animation: cloudanimation2;
animation-varighed: 15s;
animation-iteration-count: uendelig;
}
Div-klassen cloud2 anvendes med egenskaberne, der er forklaret nedenfor:-
- “ .cloud2 ” bruges til at få adgang til klasseskyen2.
- “ baggrundsbillede ” egenskab indstilles som url(/images/cloud.png), hvor billedet er en mappe, der indeholder billedet cloud.png.
- “ baggrundsstørrelse ” indeholder en værdi sørger for synligheden af billedet.
- “ baggrund-gentag ” egenskab med værdien angivet som no-repeat viser billedet som non-repeat.
- “ position ” som absolut positionerer billedet i forhold til dets overordnede element.
- “ top egenskaben indstiller billedet til 100px fra toppen.
- “ bredde ” egenskaben bruges til at indstille bredden af div-elementet.
- “ højde ” egenskaben bruges til at indstille højden af div-elementet.
- “ animation ” tildeles navnet cloudanimation2.
- “ animation-varighed ” repræsenterer varigheden af animationen.
- “ animation-iteration-tæller ” tildeles værdien uendelig, hvilket vil gentage animationen uendeligt mange gange.
Angiv @keyframes for cloudanimation1
@ keyframes cloudanimation1 {
til {
venstre: 0px;
}
fra {
venstre: 100 % ;
}
}
Cloud1 div er bundet med animation, der er beskrevet nedenfor:-
- “ @keyframes cloudanimation1 ” navnet på animation cloudanimation1 efterfølges af nøgleordet @keyframes, der bruges til at angive overgang.
- Nøgleordet @keyframes angiver, hvordan animationen udføres fra start til slut på skybillederne.
- Det ' til ' og ' fra ” søgeord angiver, at cloud1 vil flytte sig fra 100 % til 0px på skærmen.
Angiv @keyframes for cloudanimation2
@ keyframes cloudanimation2 {
0 % {
venstre: 0 % ;
}
100 % {
venstre: 100 % ;
}
}
Div-klassen cloud2 er forbundet med animationen, der er forklaret nedenfor:-
- “ @keyframes cloudanimation2 ” repræsenterer animationsnavnet cloudanimation2 efterfulgt af nøgleordet @keyframes, der bruges til at angive animation.
- Det ' 0 % ' og ' 100 % ” repræsenterer starten og slutningen af animationen.
- Ved 0 % af animationen vil skyen være til venstre med værdien indstillet til 0 %, og den vil gradvist bevæge sig til 100 % af bredden.
Produktion
Det er sejt! Vi har diskuteret, hvordan vi med succes kan specificere animation til elementerne ved hjælp af nøgleordet @keyframes.Konklusion
CSS tillader os at anvende stilarter på HTML-elementer. Animationen i CSS udfører overgange fra en stil til en anden. Den består af to komponenter, animationsstilene og keyframes. Animationsstile repræsenterer forskellige egenskaber såsom deres navn, animation-varighed, animation-iteration-antal og mere. Hvorimod keyframe-komponenten definerer begyndelsen og slutningen af animationen. Denne vejledning uddybede, hvordan man opsætter animerede keyframes med eksempler.
- Tilføj en