HTML-språket tillhandahåller webbsidans struktur och CSS tillhandahåller designen och formateringen av den applikationen. Denna kombination låter dig också lägga till animering, eftersom de animerade elementen ser mer attraktiva ut jämfört med statiska element. Det låter också ett element ändra sin stil gradvis.
Den här artikeln kommer att vägleda hur vi kan tillämpa animation på elementen. Så, låt oss börja!
Vad är CSS Animation Keyframes?
För att få animeringen gjord måste vi binda animeringen till HTML-elementet. För detta ändamål, använd nyckelordet ' @nyckelrutor ” följt av animationens namn. Den här komponenten anger början och slutet av animeringen.
Hur man ställer in CSS Animation Keyframes?
För att sätta upp animerade nyckelrutor i CSS kommer vi att gå igenom två exempel.
Exempel 1
För att ställa in animerade nyckelrutor i CSS, utför följande steg:
-
- Lägg till en med klassnamnet ' huvud-div ”.
- Inuti div, lägg till ytterligare en div med klassnamnet ' img-peng ”.
- Inuti denna img-peng div, lägg till
för att placera bilden. Den här taggen har tre attribut, ' src ' attribut för att tillhandahålla bildsökvägen, ' allt ” är den alternativa texten som läggs till om bilden inte visas, och ” bredd ”-attribut för att ge bildens bredd.
HTML
< div klass = 'main-div' >
< div klass = 'img-peng' >
< img src = 'images/penguin.png' allt = 'pingvin' bredd = '100' >
div >
div >
.main-div {
CSS
bredd: 90 % ;
höjd: 90px;
bakgrundsfärg: rgb ( 67 , 66 , 87 ) ;
marginal: 20px auto;
stoppning: 10px;
}
I CSS, ' .main-div ” läggs till för att komma åt div-klassen. De egenskaper som tillämpas på det förklaras nedan:-
- ' bredd ” egenskapsvärdet definierar div:ns bredd.
- ' höjd egenskapen används för att ställa in div:ns höjd.
- ' bakgrundsfärg ” egenskapen tillämpar färg på elementets bakgrund.
- ' marginal ' är inställd som ' 20px bil ”, som anger utrymmet uppifrån och ner, och auto betyder lika utrymme från vänster och höger.
- ' stoppning ” egenskapsvärdet tilldelas som 10px, vilket applicerar utrymme runt elementets innehåll.
Stil img-peng klass
.img-peng {
bredd: 50px;
höjd: 100px;
position: relativ;
animation: skaka;
animation-varaktighet: 2s;
animation-timing-funktion: 2s;
animation-iteration-count: oändlig;
}
den ' .img-peng ” används för att komma åt div-klassen, som nämns i HTML-filen ovan. Detta div-element är utformat med egenskaper som diskuteras nedan:-
- ' bredd ” egenskapsvärdet används för att ställa in elementets bredd.
- ' höjd ” egenskapsvärdet används för att ställa in elementets höjd.
- ' placera ' egenskapen tilldelas värdet ' släkting ”, vilket innebär att den kommer att placeras relativt sin normala position.
- ' animation ' namn ges som ' skaka ”. Däremot kan du namnge animation enligt kravet.
- ' animation-varaktighet ” representerar animeringens varaktighet, vilket är 2 sekunder.
- ' animation-timing-funktion ” tilldelas värdet 2s vilket betyder att animeringen är klar på 2 sekunder.
- ' animation-iteration-count ” är inställd som oändlig, vilket betyder att denna animering kommer att ske i oändlig tid.
Definiera @keyframes Med till och från nyckelord
@ nyckelbildrutor skakar {
från {
topp: 50px;
}
till {
margin-bottom: 200px;
}
}
Beskrivningen av de animerade nyckelbildrutor som är inställda på bilden listas nedan:-
- ' @keyframes skakar ” hänvisar till animationsnamnet shake följt av nyckelordet @keyframes. Inom denna regel specificeras animeringens beteende.
- Inuti dess lockiga parentes, ' från ' och ' till ” nyckelord anger olika intervall för att definiera animeringens beteende.
- den ' topp ” egenskapen tilldelas värdet 50px, vilket innebär att animeringen startar från 50px från toppen av skärmen och fortsätter till 200px längst ner.
Som ett resultat kommer du att se följande utdata:
Låt nu animeringen bete sig annorlunda vid olika intervall. För att göra det, använd animationsprocenten i @keyframes.Ange @keyframes med procentsatser
@ nyckelbildrutor skakar {
0 % {
vänster: -50 pixlar ;
}
25 % {
vänster: 50px;
}
femtio % {
vänster: -25 pixlar ;
}
75 % {
vänster: 25px;
}
100 % {
vänster: 10px;
}
}
Så, beskrivningen av ovanstående kodavsnitt nämns här:-
- Procentvärdena 0 %, 25 %, 50 %, 75 % och 100 % representerar animeringen vid olika intervall.
- Dessutom, vid 0 %, kommer utrymmet till vänster om bilden att vara ' -50 pixlar ”. Vid 25 % kommer utrymmet till vänster att vara ' 50 px ”. Vid 50 % kommer utrymmet till vänster att vara ' -25 pixlar ”. Vid 75 % blir det vänstra utrymmet ' 25 px ', och när animeringen är klar (100%), kommer det vänstra utrymmet att vara ' 10px ”.
Ovanstående kod visar följande animation:
Låt oss ta ett annat exempel för att se hur vi kan ställa in animationer till bilderna.Exempel 2
Lägg till en
i HTML med klassnamnet ' huvudsida ”. Inuti detta-element, placera ytterligare två div-taggar med klasserna ' moln1 ' och ' moln2 ”, respektive.HTML
< div klass = 'huvudsida' >
< div klass = 'moln1' > div >
< div klass = 'moln2' > div >
div >
kropp {
CSS
marginal: 0 ;
stoppning: 0 ;
}
I CSS kommer vi att tilldela följande CSS-egenskaper till body-elementet:-
- ' marginal ” egenskap som 0 anger inget mellanslag runt elementet.
- ' stoppning ” egenskap med värdet 0 anger inget mellanslag runt elementets innehåll.
Style huvudsida div
.huvudsida {
bakgrundsbild: url ( / bilder / vargnatt.png ) ;
bakgrundsupprepning: ingen upprepning;
bakgrundsstorlek: omslag;
höjd: 100vh;
position: relativ;
overflow: gömd;
}
Här:-
- ' .huvudsida ” används för att komma åt div-klassen.
- ' bakgrundsbild ' egenskapen tilldelas värdet ' url(/images/wolf-night.png) ” där bilder är mappen som innehåller bilden wolf-night.png.
- ' bakgrund-upprepa ' egenskapen tilldelas värdet ' ingen upprepning , vilket betyder att bilden kommer att visas en gång.
- ' bakgrundsstorlek ' är inställd som en ' omslag ” för att fylla hela div-elementet.
- ' höjd ” är 100vh vilket är 100 % av visningsportens höjd.
- ' placera ” som relativ ställer in bildens position i förhållande till dess nuvarande plats.
- ' svämma över ” egenskapens värde är inställt som dolt för att dölja den del av bilden som är för stor för att passa in i behållaren.
Stil moln1 klass
.moln1 {
bakgrundsbild: url ( / bilder / cloud.png ) ;
bakgrundsstorlek: innehålla;
bakgrundsupprepning: ingen upprepning;
position: absolut;
topp: 100px;
bredd: 500px;
höjd: 300px;
animation: cloudanimation1;
animation-varaktighet: 70-tal;
animation-iteration-count: oändlig;
}
div-klassen cloud1 tillämpas med följande förklarade egenskaper:-
- ' .moln1 ” används för att komma åt div-klassen cloud1.
- ' bakgrundsbild ”-egenskapen är inställd som url(/images/cloud.png), där bilder är mappen som innehåller bilden cloud.png.
- ' bakgrundsstorlek ' med värdet ' innehålla ” säkerställer bildens synlighet.
- ' bakgrund-upprepa ' egenskap med värdet inställt som ' ingen upprepning ” visar bilden som icke-upprepad.
- ' placera ” som absolut positionerar bilden i förhållande till dess överordnade element.
- ' topp egenskapen ställer in bilden på 100px från toppen.
- ' bredd ”-egenskapen används för att ställa in div-elementets bredd till 500px.
- ' höjd ”-egenskapen används för att ställa in div-elementets höjd till 300px.
- ' animation ” tilldelas namnet cloudanimation1.
- ' animation-varaktighet ” representerar animeringens varaktighet, som är 70 sekunder.
- ' animation-iteration-count ” tilldelas värdet oändligt, vilket kommer att upprepa animeringen oändligt många gånger.
Hittills har vi tillämpat CSS-egenskaperna på div-klassens huvudsida och cloud1. Nu, i nästa avsnitt, kommer vi att utforma nästa div-klass som heter cloud2.
Stil moln2 klass
.moln2 {
bakgrundsbild: url ( / bilder / cloud.png ) ;
bakgrundsstorlek: innehålla;
bakgrundsupprepning: ingen upprepad;
position: absolut;
topp: 50px;
bredd: 200px;
höjd: 300px;
animation: cloudanimation2;
animation-varaktighet: 15s;
animation-iteration-count: oändlig;
}
div-klassen cloud2 tillämpas med egenskaperna som förklaras nedan:-
- ' .moln2 ” används för att komma åt klassen moln2.
- ' bakgrundsbild ”-egenskapen är inställd som url(/images/cloud.png), där bilden är en mapp som innehåller bilden cloud.png.
- ' bakgrundsstorlek ” innehåller ett värde säkerställer bildens synlighet.
- ' bakgrund-upprepa ” egenskap med värdet inställt som no-repeat visar bilden som non-repeat.
- ' placera ” som absolut positionerar bilden i förhållande till dess överordnade element.
- ' topp egenskapen ställer in bilden på 100px från toppen.
- ' bredd ” egenskapen används för att ställa in bredden på div-elementet.
- ' höjd ”-egenskapen används för att ställa in höjden på div-elementet.
- ' animation ” tilldelas namnet cloudanimation2.
- ' animation-varaktighet ” representerar längden på animeringen.
- ' animation-iteration-count ” tilldelas värdet oändligt, vilket kommer att upprepa animeringen oändligt många gånger.
Ange @keyframes för cloudanimation1
@ keyframes molnanimation1 {
till {
vänster: 0px;
}
från {
vänster: 100 % ;
}
}
Cloud1 div är bunden med animering som beskrivs nedan:-
- ' @keyframes cloudanimation1 ” namnet på animation cloudanimation1 följs av nyckelordet @keyframes som används för att ange övergång.
- Nyckelordet @keyframes anger hur animeringen görs från början till slut på molnbilderna.
- den ' till ' och ' från ” nyckelord anger att molnet1 kommer att flyttas från 100 % till 0px på skärmen.
Ange @keyframes för cloudanimation2
@ keyframes cloudanimation2 {
0 % {
vänster: 0 % ;
}
100 % {
vänster: 100 % ;
}
}
div-klassen cloud2 är associerad med animationen som förklaras nedan:-
- ' @keyframes cloudanimation2 ” representerar animationsnamnet cloudanimation2 följt av nyckelordet @keyframes som används för att ange animering.
- den ' 0 % ' och ' 100 % ” representerar början och slutet av animeringen.
- Vid 0 % av animeringen skulle molnet vara till vänster med värdet inställt på 0 %, och det kommer gradvis att flyttas till 100 % av bredden.
Produktion
Det är coolt! Vi har diskuterat hur vi kan specificera animering till elementen med hjälp av nyckelordet @keyframes framgångsrikt.Slutsats
CSS tillåter oss att tillämpa stilar på HTML-element. Animeringen i CSS utför övergångar från en stil till en annan. Den består av två komponenter, animationsstilarna och nyckelbildrutorna. Animationsstilar representerar olika egenskaper som deras namn, animationslängd, animation-iterationsantal och mer. Medan keyframe-komponenten definierar början och slutet av animeringen. Den här guiden utvecklade hur man ställer in animerade nyckelrutor med exempel.
- Lägg till en