De HTML-taal zorgt voor de structuur van de webpagina en CSS zorgt voor het ontwerp en de opmaak van die applicatie. Met deze combinatie kunt u ook animatie toevoegen, omdat de geanimeerde elementen er aantrekkelijker uitzien in vergelijking met statische elementen. Het laat een element ook geleidelijk van stijl veranderen.
Dit artikel laat zien hoe we animatie op de elementen kunnen toepassen. Laten we beginnen!
Wat zijn CSS-animatiesleutelframes?
Om de animatie voor elkaar te krijgen, moeten we de animatie binden aan het HTML-element. Gebruik hiervoor het trefwoord ' @sleutelframes ” gevolgd door de naam van de animatie. Dit onderdeel specificeert het begin en einde van de animatie.
Hoe stel je CSS-animatiesleutelframes in?
Om animatiesleutelframes in CSS in te stellen, zullen we twee voorbeelden doornemen.
voorbeeld 1
Voer de volgende stappen uit om animatiesleutelframes in CSS in te stellen:
-
- Voeg een toe met de klassenaam ' hoofd-div ”.
- Voeg binnen de div nog een div toe met de klassenaam ' img-peng ”.
- Voeg binnen deze img-peng div
toe om de afbeelding te plaatsen. Deze tag heeft drie attributen, de ' src ' attribuut om het afbeeldingspad op te geven, ' alles ” is de alternatieve tekst die wordt toegevoegd als de afbeelding niet wordt weergegeven, en de “ breedte ” attribuut om de breedte van de afbeelding op te geven.
HTML
< div klas = 'main-div' >
< div klas = 'img-peng' >
< img src = 'afbeeldingen/pinguïn.png' alles = 'pinguïn' breedte = '100' >
div >
div >
.main-div {
CSS
breedte: 90 % ;
hoogte: 90px;
achtergrondkleur: rgb ( 67 , 66 , 87 ) ;
marge: 20px automatisch;
opvulling: 10px;
}
In CSS is de ' .main-div ” is toegevoegd om toegang te krijgen tot de div-klasse. De eigenschappen die erop zijn toegepast, worden hieronder uitgelegd:-
- “ breedte ” eigenschapswaarde definieert de breedte van de div.
- “ hoogte ” eigenschap wordt gebruikt om de hoogte van de div in te stellen.
- “ Achtergrond kleur ” eigenschap past kleur toe op de achtergrond van het element.
- “ marge ” is ingesteld als “ 20px auto ”, wat de ruimte van boven en van onder aangeeft, en auto betekent gelijke ruimte van links en rechts.
- “ opvulling ” eigenschapswaarde wordt toegewezen als 10px, wat ruimte rond de inhoud van het element toepast.
Stijl img-peng klasse
.img-peng {
breedte: 50px;
hoogte: 100px;
positie: relatief;
animatie: schudden;
animatieduur: 2s;
animatie-timing-functie: 2s;
animatie-iteratie-telling: oneindig;
}
De ' .img-peng ” wordt gebruikt om toegang te krijgen tot de div-klasse, vermeld in het bovenstaande HTML-bestand. Dit div-element is opgemaakt met eigenschappen die hieronder worden besproken:-
- “ breedte ” eigenschapswaarde wordt gebruikt om de breedte van het element in te stellen.
- “ hoogte ” eigenschapswaarde wordt gebruikt om de hoogte van het element in te stellen.
- “ positie ” eigenschap krijgt de waarde toegewezen “ familielid ”, wat betekent dat het ten opzichte van zijn normale positie wordt gepositioneerd.
- “ animatie ' naam wordt gegeven als ' schudden ”. U kunt animatie echter een naam geven volgens de vereisten.
- “ animatieduur ” vertegenwoordigt de duur van de animatie, die 2 seconden is.
- “ animatie-timing-functie ” krijgt een waarde van 2s toegewezen, wat betekent dat de animatie binnen 2 seconden voltooid is.
- “ animatie-iteratie-telling ' is ingesteld als oneindig, wat betekent dat deze animatie in oneindige tijd zal plaatsvinden.
Definieer @keyframes Met van en naar trefwoorden
@ sleutelframes trillen {
van {
boven: 50px;
}
tot {
marge-onder: 200px;
}
}
De beschrijving van de animatiesleutelframes die op de afbeelding zijn ingesteld, vindt u hieronder:-
- “ @keyframes schudden ” verwijst naar de animatienaam shake gevolgd door het trefwoord @keyframes. Binnen deze regel wordt het gedrag van de animatie gespecificeerd.
- Binnen de accolades, de ' van ' en ' tot ” sleutelwoorden specificeren verschillende intervallen om het animatiegedrag te definiëren.
- De ' bovenkant ” krijgt de waarde 50px toegewezen, wat betekent dat de animatie begint vanaf 50px vanaf de bovenkant van het scherm en doorloopt tot de 200px onderaan.
Als resultaat ziet u de volgende uitvoer:
Laat de animatie zich nu met verschillende tussenpozen anders gedragen. Gebruik hiervoor de animatiepercentages in de @keyframes.Specificeer @keyframes met percentages
@ sleutelframes trillen {
0 % {
links: -50px ;
}
25 % {
links: 50px;
}
vijftig % {
links: -25px ;
}
75 % {
links: 25px;
}
100 % {
links: 10px;
}
}
Dus de beschrijving van het bovenstaande codefragment wordt hier vermeld:-
- De percentagewaarden 0%, 25%, 50%, 75% en 100% vertegenwoordigen de animatie met verschillende intervallen.
- Bovendien wordt bij 0% de ruimte links van de afbeelding ' -50px ”. Bij 25% wordt de ruimte aan de linkerkant ' 50px ”. Bij 50% is de ruimte aan de linkerkant ' -25px ”. Bij 75% is de linkerruimte ' 25px ', en wanneer de animatie is voltooid (100%), is de linkerruimte ' 10px ”.
De bovenstaande code geeft de volgende animatie weer:
Laten we nog een voorbeeld nemen om te zien hoe we animaties op de afbeeldingen kunnen instellen.Voorbeeld 2
Voeg in HTML een
toe met de klassenaam ' hoofdpagina ”. Plaats binnen dit-element nog twee div-tags met klassen ' wolk1 ' en ' wolk2 ”, respectievelijk.HTML
< div klas = 'hoofdpagina' >
< div klas = 'wolk1' > div >
< div klas = 'wolk2' > div >
div >
lichaam {
CSS
marge: 0 ;
opvulling: 0 ;
}
In CSS zullen we de volgende CSS-eigenschappen toewijzen aan het body-element:-
- “ marge ” eigenschap als 0 specificeert geen spatie rond het element.
- “ opvulling ” eigenschap met de waarde 0 specificeert geen spatie rond de inhoud van het element.
Stijl hoofdpagina div
.hoofdpagina {
achtergrondafbeelding: url ( / afbeeldingen / wolf-nacht.png ) ;
achtergrondherhaling: geen herhaling;
achtergrondformaat: omslag;
hoogte: 100vh;
positie: relatief;
overloop verborgen;
}
Hier:-
- “ .hoofdpagina ” wordt gebruikt om toegang te krijgen tot de div-klasse.
- “ achtergrond afbeelding ” eigenschap krijgt de waarde toegewezen “ url(/images/wolf-nacht.png) ” waarbij afbeeldingen de map is die de afbeelding wolf-night.png bevat.
- “ achtergrond herhaling ” eigenschap krijgt de waarde toegewezen “ geen herhaling , wat betekent dat de afbeelding één keer wordt weergegeven.
- “ achtergrondformaat ” is ingesteld als een “ omslag ” om het hele div-element te vullen.
- “ hoogte ” is 100vh wat 100% is van de hoogte van de viewport.
- “ positie ” as relative stelt de beeldpositie in ten opzichte van de huidige locatie.
- “ overloop De waarde van de eigenschap ” is ingesteld als verborgen om het deel van de afbeelding te verbergen dat te groot is om in de container te passen.
Stijlwolk1 klasse
.wolk1 {
achtergrondafbeelding: url ( / afbeeldingen / wolk.png ) ;
achtergrondgrootte: bevatten;
achtergrondherhaling: geen herhaling;
positie: absoluut;
bovenaan: 100px;
breedte: 500px;
hoogte: 300px;
animatie: wolkenanimatie1;
animatieduur: 70s;
animatie-iteratie-telling: oneindig;
}
De div-klasse cloud1 wordt toegepast met de volgende toegelichte eigenschappen:-
- “ .wolk1 ” wordt gebruikt om toegang te krijgen tot de div class cloud1.
- “ achtergrond afbeelding ” eigenschap is ingesteld als url(/images/cloud.png), waarbij afbeeldingen de map is die de afbeelding cloud.png bevat.
- “ achtergrondformaat ” met de waarde “ bevatten ” zorgt voor de zichtbaarheid van het beeld.
- “ achtergrond herhaling ” eigendom met de waarde ingesteld als “ geen herhaling ” geeft het beeld weer als niet-herhaald.
- “ positie ” als absolute positioneert de afbeelding ten opzichte van het bovenliggende element.
- “ bovenkant ”-eigenschap stelt de afbeelding in op 100px vanaf de bovenkant.
- “ breedte ” eigenschap wordt gebruikt voor het instellen van de breedte van het div-element op 500px.
- “ hoogte ” eigenschap wordt gebruikt voor het instellen van de hoogte van het div-element op 300px.
- “ animatie ” krijgt de naam cloudanimation1 toegewezen.
- “ animatieduur ” vertegenwoordigt de duur van de animatie, die 70 seconden is.
- “ animatie-iteratie-telling ” krijgt de waarde oneindig toegewezen, waardoor de animatie oneindig vaak wordt herhaald.
Tot nu toe hebben we de CSS-eigenschappen toegepast op de hoofdpagina van de klasse div en cloud1. Nu, in de volgende sectie, zullen we de volgende div-klasse met de naam cloud2 stylen.
Stijl cloud2 klasse
.wolk2 {
achtergrondafbeelding: url ( / afbeeldingen / wolk.png ) ;
achtergrondgrootte: bevatten;
achtergrondherhaling: geen herhaling;
positie: absoluut;
boven: 50px;
breedte: 200px;
hoogte: 300px;
animatie: wolkenanimatie2;
animatieduur: 15s;
animatie-iteratie-telling: oneindig;
}
De div-klasse cloud2 wordt toegepast met de eigenschappen die hieronder worden uitgelegd:-
- “ .wolk2 ” wordt gebruikt om toegang te krijgen tot de klassenwolk2.
- “ achtergrond afbeelding ” eigenschap is ingesteld als url(/images/cloud.png), waarbij de afbeelding een map is die de afbeelding cloud.png bevat.
- “ achtergrondformaat ” bevat een waarde die ervoor zorgt dat de afbeelding zichtbaar is.
- “ achtergrond herhaling ” eigenschap met de waarde ingesteld als niet-herhalen geeft de afbeelding weer als niet-herhalen.
- “ positie ” als absolute positioneert de afbeelding ten opzichte van het bovenliggende element.
- “ bovenkant ”-eigenschap stelt de afbeelding in op 100px vanaf de bovenkant.
- “ breedte ” eigenschap wordt gebruikt om de breedte van het div-element in te stellen.
- “ hoogte ” eigenschap wordt gebruikt om de hoogte van het div-element in te stellen.
- “ animatie ” krijgt de naam cloudanimation2.
- “ animatieduur ” vertegenwoordigt de duur van de animatie.
- “ animatie-iteratie-telling ” krijgt de waarde oneindig toegewezen, waardoor de animatie oneindig vaak wordt herhaald.
Specificeer @keyframes voor cloudanimation1
@ keyframes cloudanimatie1 {
tot {
links: 0px;
}
van {
links: 100 % ;
}
}
De cloud1 div is gebonden met animatie die hieronder wordt beschreven:-
- “ @keyframescloudanimation1 ” de naam van animatie cloudanimation1 wordt gevolgd door het trefwoord @keyframes dat wordt gebruikt om de overgang te specificeren.
- Het sleutelwoord @keyframes geeft aan hoe de animatie van begin tot eind wordt uitgevoerd op de cloudafbeeldingen.
- De ' tot ' en ' van ” sleutelwoorden specificeren dat de cloud1 van 100% naar de 0px van het scherm gaat.
Specificeer @keyframes voor cloudanimation2
@ keyframes cloudanimatie2 {
0 % {
links: 0 % ;
}
100 % {
links: 100 % ;
}
}
De div-klasse cloud2 is gekoppeld aan de animatie die hieronder wordt uitgelegd:-
- “ @keyframescloudanimation2 ” staat voor de animatienaam cloudanimation2 gevolgd door het trefwoord @keyframes dat wordt gebruikt om animatie te specificeren.
- De ' 0% ' en ' 100% ” vertegenwoordigen het begin en het einde van de animatie.
- Bij 0% van de animatie zou de wolk zich aan de linkerkant bevinden met de waarde ingesteld op 0%, en deze zal geleidelijk naar 100% van de breedte gaan.
Uitgang
Dat is cool! We hebben besproken hoe we met succes animatie aan de elementen kunnen specificeren met behulp van het trefwoord @keyframes.Conclusie
Met CSS kunnen we stijlen toepassen op HTML-elementen. De animatie in CSS voert overgangen uit van de ene stijl naar de andere. Het bestaat uit twee componenten, de animatiestijlen en de keyframes. Animatiestijlen vertegenwoordigen verschillende eigenschappen, zoals hun naam, animatieduur, aantal animaties en meer. Terwijl de keyframe-component het begin en einde van de animatie definieert. Deze gids ging in op het instellen van animatiesleutelframes met voorbeelden.
- Voeg een