Denne artikkelen demonstrerer prosessen med å legge til flertrinnsanimasjoner og overganger.
Hvordan bruke flertrinns animasjoner og overganger?
For å lage en flertrinns animasjon genereres en serie nøkkelbilder. Den spesifiserer serien med endringer som skal brukes på det valgte HTML-elementet. Hver keyframe representerer en annen tilstand av animasjonen, og nettleseren overfører elementet jevnt mellom disse tilstandene. Under overganger, spesifiser jevn endring av CSS-egenskaper over en spesifisert varighet ved brukerinteraksjoner eller tilstandsendringer.
La oss gå gjennom et praktisk eksempel for bedre forståelse:
Eksempel 1: Bruk av flertrinnsanimasjon
I dette eksemplet kommer en flertrinnsanimasjon til å gjelde for det valgte HTML-elementet. Besøk demonstrasjonen nedenfor:
< stil >
.animasjonEksempel {
bredde: 130px;
høyde: 130px;
bakgrunnsfarge: skoggrønn;
stilling: pårørende;
animasjon: moveAnimate 4s ease-in-out uendelig;
}
< / stil >
< kropp >
< div klasse = 'animasjonseksempel' >< / div >
< / kropp >
I kodebiten ovenfor:
- Først kalte klassen ' animasjonseksempel ' er valgt i '
' stikkord. - Deretter verdiene til ' 130 piksler ' er tildelt ' høyde ' og ' bredde ' egenskaper.
- I tillegg setter du ' Skoggrønn ' og ' slektning ' som en verdi for ' bakgrunnsfarge ' og ' posisjon egenskaper for å forbedre visualisering.
- Etter det bruker du ' animasjon ' egenskap og sett den lik ' moveAnimate 4s lett-inn-ut uendelig ' for å bruke animasjoner.
- Verdien består av fire deler, den første er den egendefinerte navneanimasjonen, den andre er varigheten for å fullføre, den tredje er typen animasjon og den fjerde er grensen for hvor mange ganger denne animasjonen skal gjelde.
- Til slutt, lag et HTML-element og tilordne ' animasjonseksempel 'klasse til det.
Bruk nå ' nøkkelbilder ' regel for å definere den tilpassede ' flytteAnimer ' animasjon:
@ moveAnimer nøkkelbilder {0 % {
venstre: 0 ;
bakgrunnsfarge: blå;
}
femti % {
venstre: 200px;
bakgrunnsfarge: skoggrønn;
transformere: rotere ( 180 grader ) ;
}
100 % {
venstre: 0 ;
bakgrunnsfarge: blå;
}
}
I kodeblokken ovenfor:
- Først, ' @keyframes ”-blokken opprettes sammen med navnet på den tilpassede animasjonen som skal defineres.
- Deretter oppretter du en blokk kalt ' 0 % ” som bruker CSS-stiler i begynnelsen av animasjonen. Og bruk ' bakgrunnsfarge ' og ' venstre ' CSS-egenskaper.
- Lag nå en blokk kalt og ' femti% ” for å style midt i animasjonen. Det gir verdiene til ' 200 piksler ', ' Skoggrønn ' og ' roter (180 grader) ' til 'venstre', 'bakgrunnsfarge' og 'transform' egenskaper. Dette lar det valgte elementet rotere 200px til venstre.
Etter kompileringen av kodeblokken ovenfor:
Utdataene viser at flertrinnsanimasjonen har blitt brukt på det valgte HTML-elementet.
Eksempel 2: Bruk av flertrinns overgang
For å bruke flertrinnsovergangen kan CSS-velgerne brukes sammen med ' overgang ' eiendom. Besøk koden nedenfor:
.fade {
opasitet: 1;
overgang: opasitet 1s;
}
.fade:hover {
opasitet: 0;
}
<
/ stil>
<
kropp>
< s klasse = 'falme' > Hold musepekeren over meg for å se overgangen. < / s >
< / kropp >
Forklaringen av koden ovenfor:
- Først den tilpassede ' falme '-klassen er valgt og verdien av 1 gis til ' opasitet ' eiendom. Sett også verdien av ' opasitet 1s ' til ' overgang ' CSS-egenskap. Dette setter eller fjerner opasiteten i en tidsperiode på ' 1s '.
- Deretter ' :sveve '-velgeren er tilordnet til ' falme ' klasse. I den er verdien av ' 0 ” er satt til egenskapen opacitet.
- Til slutt opprettes HTML-elementet inne i ' '-taggen og klassen til ' falme ” er knyttet til den.
Etter slutten av kompileringsfasen ser nettsiden slik ut:
GIF-en viser at den tilpassede uttoningsovergangen har blitt brukt på det valgte HTML-elementet.
Konklusjon
Flertrinnsanimasjonene og overgangene gir liv til HTML-nettsidene ved å legge til bevegelse og visuelle effekter. For animasjon, ' nøkkelbilder ' brukes sammen med varighetsprosenten som ' 0 % 'er starten', femti% ' er midten, og ' 100 % ” er slutten på animasjonens varighet. For overgangen kan CSS-velgeren brukes sammen med ' overgang ' klasse. Denne artikkelen har demonstrert prosessen med å bruke flertrinns animasjoner og overganger.