For å forskjønne webdesignet ditt, anbefales det å legge til animasjoner på det sterkeste. Animasjoner blir referert til som et jevnt skifte i elementstilen. CSS lar deg legge til animasjoner til forskjellige elementer med stor letthet.

Når du bruker animasjoner på forskjellige CSS -elementer, må du oppgi noen nøkkelrammer for animasjonen. De @KeyFrames Regel spesifiserer at et element vil endre sin nåværende stil til det som er spesifisert til bestemte tidspunkter. Dessuten må du knytte en animasjon til et bestemt element for at animasjonen skal fungere.

Det er forskjellige CSS -animasjonsegenskaper som brukes til å legge animasjoner til forskjellige CSS -elementer, vi har diskutert disse egenskapene nedenfor.

CSS -animasjonsegenskaper

CSS gir forskjellige animasjonsegenskaper som er forklart i detalj nedenfor.

Animasjonsnavn

Denne egenskapen brukes til å definere et navn for @keyframes.

Syntaks

Animasjonsnavn: Ingen | Keyframename | Opprinnelig | arve;

De Keyframename Parameter definerer et navn for nøkkelrammen du ønsker å knytte til et element.

Eksempel
Tenk på eksemplet nedenfor for å forstå hvordan denne egenskapen fungerer.

Html

Hei Verden

Her har vi definert en

element som vi vil bruke animasjonseffekten på.

CSS

P
Font-størrelse: 30px;
Posisjon: relativ;
Animasjonsnavn: animasjon;
Animasjonsforhold: 5s;

@KeyFrames animasjon
fra venstre: 0px;
til venstre: 200px;

Før vi bruker animasjonseffekten har vi først satt skriftstørrelsen og plasseringen av avsnittet. Senere har vi tildelt nøkkelrammer et navn og bruker @keyframes -regelen, vi definerer at animasjonen vil få avsnittet til å flytte fra 0px til 200px fra venstre.

Merk at det er viktig å angi animasjonsvarigheten, ellers vil det ikke fungere.

Produksjon

Animasjonen fungerer som den skal.

Animasjonsforhold

Denne egenskapen definerer tiden en animasjon bør ta for å fullføre en syklus.

Syntaks

Animasjonsforsyning: Tid | Opprinnelig | arve;

Tidsparameteren definerer animasjonstidens tid.

Eksempel
Slik kan du angi varigheten av en animasjon.

Html

Vi har ganske enkelt definert et divelement.

CSS

div
Bredde: 100px;
Høyde: 100px;
bakgrunnsfarge: brun;
Posisjon: relativ;
Animasjonsnavn: animasjon;
Animasjonsforhold: 3S;

@KeyFrames animasjon
fra venstre: 0px;
til venstre: 200px;

Bortsett fra å style Div Container, har vi satt animasjonsvarigheten til 3 sekunder. Dette betyr at animasjonen vil fortsette å spille i 3 sekunder.

Produksjon

Animasjonen spilles i 3 sekunder.

Animasjon-forsinkelse

Denne eiendommen definerer ventetiden før animasjonen begynner.

Syntaks

Animasjon-forsinkelse: Tid | Opprinnelig | arve;

Tidsparameteren definerer ventetiden før animasjonen starter, men den er valgfritt.

Eksempel
Anta at du vil utsette animasjonen i 2 sekunder, og følg koden nedenfor.

CSS

div
Bredde: 100px;
Høyde: 100px;
bakgrunnsfarge: brun;
Posisjon: relativ;
Animasjonsnavn: animasjon;
Animasjonsforhold: 5s;
Animasjon-forsinkelse: 2s;

@KeyFrames animasjon
fra venstre: 0px;
til venstre: 200px;

Ovennevnte kode spesifiserer at DIV -beholderen vil flytte fra 0px til 200px fra venstre i 5 sekunder etter en ventetid på 2 sekunder.

Produksjon

Animasjonen ble forsinket i 2 sekunder og startet deretter som ønsket.

Animasjonstiming-funksjon

Denne egenskapen definerer akselerasjonskurven for animasjonen.

Syntaks

Animasjons-timing-funksjon: EASE | lineær | Løshet | Easy-Out | Ease-in-Out | kubisk-bezier (n, n, n, n);

Alle parametrene er forklart nedenfor.

• letthet: Animasjonen skjer på sakte-sakte måte.
• lineær: Animasjonen vil ha samme hastighet fra å starte til slutt.
• Løshet: Animasjonen vil ha en langsom begynnelse.
• Easy-Out: Animasjonen vil ha en langsom avslutning.
• Ease-in-Out: Animasjonen vil ha en langsom begynnelse så vel som en langsom slutt.
• kubisk-bezier (n, n, n, n): Verdiene til animasjonen vil bli satt på en kubisk-bezier måte.

Eksempel
Eksemplet nedenfor viser letthetsparameteren til eiendommen som diskuteres.

CSS

div
Animasjonsnavn: animasjon;
Animasjonsforhold: 5s;
Animasjons-timing-funksjon: letthet;

@KeyFrames animasjon
fra venstre: 0px;
til venstre: 200px;

Vi har satt verdien av animasjons-timing-funksjonen for å lette, derfor vil animasjonen skje på en langsom rask-sakte måte.

Produksjon

Animasjonen spiller på en langsom rask sakte måte.

Animasjon-iteration-count

Denne egenskapen definerer hvor mange ganger en animasjon vil spille.

Syntaks

Animasjon-iteration-count: Nummer | uendelig | Opprinnelig | arve;

Nummerparameteren definerer antall ganger en animasjon vil bli spilt, i mellomtiden definerer den uendelige parameteren at animasjonen vil spille uendelig.

Eksempel
La oss forstå arbeidet med animasjon-iteration-tellegenskapen ved hjelp av følgende eksempel.

CSS

div
Animasjonsnavn: animasjon;
Animasjonsforhold: 5s;
Animasjon-iteration-count: 2;

@KeyFrames animasjon
fra topp: 0px;
til topp: 100px;

Koden over definerer at animasjonen vil få DIV -beholderen til å bevege seg fra 0px til 100px fra toppen i 5 sekunder to ganger.

Produksjon

Animasjonen spilles dobbelt som spesifisert i koden.

Animasjonsrettighet

Denne egenskapen definerer retningen animasjonen vil bevege seg. Veibeskrivelse kan være fremover, bakover eller bytte mellom begge.

Syntaks

Animasjonsregistrering: Normal | omvendt | alternativ | Alternativ-reverse | arve | første;

Alle parametrene er forklart nedenfor.

• normal: Dette er en standardparameter som spiller animasjonen fremover.
• omvendt: Denne parameteren spiller animasjonen i motsatt retning.
• alternere: Denne parameteren spiller animasjonen først i retning fremover, og deretter i motsatt retning.
• alternativ reverse: Denne parameteren spiller animasjonen først i motsatt retning og deretter den fremre retningen.

Eksempel
Eksemplet nedenfor viser den alternative reverse-parameteren til animasjonsretningsegenskapen.

Html

Hei Verden

Vi har laget en overskrift.

CSS

H1
Farge: brun;
Posisjon: relativ;
Animasjonsnavn: animasjon;
Animasjonsforhold: 3S;
Animasjon-iteration-count: uendelig;
Animasjonsretning: alternativ-reverse;

@KeyFrames animasjon
Fra venstre: 0px; Farge: brun;
til venstre: 100px; Farge: gul;

Ovennevnte kode sier at overskriften vil bevege seg uendelig i 3 sekunder fra 0px til 100px fra venstre i en alternativ-reverse mote som veksler mellom fargene brune og gule.

Produksjon

Animasjonsretningsegenskapen ble implementert vellykket.

Animasjons-fyll-modus

Denne egenskapen definerer stilen til et element på det tidspunktet animasjonen ikke spiller. Dette betyr hvilken stil elementet vil ha enten før animasjonen begynner, etter at det er ferdig, eller begge deler.

Syntaks

Animasjon-fyllingsmodus: Ingen | fremover | bakover | begge | arve | første;

Alle parametrene er forklart nedenfor.

• ingen: Dette er en standardparameter som gir stil til elementet enten før eller etter animasjonen oppstår.
• Fremover: Denne parameteren holder stilen til et element definert av den siste nøkkelrammen.
• bakover: Denne parameteren holder stilen til et element definert av den første nøkkelrammen og holder fast i denne stilen i løpet av animasjonens forsinkelsestid.
• både: Denne parameteren bytter mellom spiss- og bakoverparametrene.

Eksempel
La oss se hvordan fremover -parameteren fungerer ved å følge eksemplet nedenfor.

Html

Vi har ganske enkelt laget en div container.

CSS

div
Bredde: 100px;
Høyde: 100px;
bakgrunnsfarge: brun;
Posisjon: relativ;
Animasjonsnavn: animasjon;
Animasjonsforhold: 3S;
Animasjon-fyllingsmodus: Fremover;

@KeyFrames animasjon
fra venstre: 0px;
til venstre: 100px; bakgrunnsfarge: gul;

I koden ovenfor har vi satt animasjons-fyllemodus-egenskapen til spiss parameter, derfor vil DIV-beholderen beholde stilen som er spesifisert i den siste nøkkelrammen når animasjonen er stoppet og ikke spiller.

Produksjon

Div -beholderen har en gul bakgrunnsfarge når animasjonen er stoppet og ikke spiller.

Animasjonsspill-state

Denne egenskapen definerer om animasjonen utfører eller pauset.

Syntaks

Animasjonsspill-state: Running | Paused | arve | første;

De løping Parameter er en standardverdi som spesifiserer at animasjon utfører, i mellomtiden Pauset Parameteren spesifiserer at animasjonen er pause.

Eksempel
Anta at du vil pause en animasjon ved hjelp av animasjonsspill-statens eiendom. Slik gjør du det.

CSS

div
Animasjonsnavn: animasjon;
Animasjonsforhold: 3S;
Animasjonsspill-state: PAUSED;

@KeyFrames animasjon
fra venstre: 0px;
til venstre: 100px;

Ovennevnte kode spesifiserer at animasjonen blir satt på pause.

Produksjon

Animasjonen ble pause med suksess.

animasjon

Denne egenskapen er en shorthand -eiendom for alle de ovennevnte egenskapene.

Syntaks

animasjon: ;

Eksempel
Tenk på eksemplet nedenfor for å forstå animasjonsegenskapen.

CSS

div
Animasjon: Animasjon 3S uendelig alternativ;

@KeyFrames animasjon
Fra venstre: 0px; bakgrunnsfarge: brun;
til venstre: 200px; bakgrunnsfarge: gul;

Vi spesifiserer at animasjonen vil spille uendelig i 3 sekunder på en alternativ måte.

Produksjon

Animasjonseiendommen fungerer som den skal.

Konklusjon

Animasjoner blir referert til som en gradvis endring i stilen til et element. CSS gir forskjellige animasjonsegenskaper som er som følger: animasjonsnavn, animasjonsforhold, animasjon-forsinkelse, animasjonstiming-funksjon, animasjon-iteration-count, animasjonsretning, animasjons-fyllemodus, animasjonsspill-state, og animasjon. Alle disse egenskapene brukes til å spesifisere atferden til animasjonseffekten som brukes på forskjellige HTML -elementer. I denne guiden forklares alle disse egenskapene ved hjelp av relevante eksempler.