Denne artikel demonstrerer processen med at tilføje animationer og overgange i flere trin.
Hvordan bruger man animationer og overgange med flere trin?
For at lave en animation med flere trin, genereres en række keyframes. Den specificerer rækken af ændringer, der skal anvendes på det valgte HTML-element. Hver keyframe repræsenterer en anden tilstand af animationen, og browseren overfører jævnt elementet mellem disse tilstande. Under overgange skal du angive den jævne ændring af CSS-egenskaber over en specificeret varighed ved hjælp af brugerinteraktioner eller tilstandsændringer.
Lad os gennemgå et praktisk eksempel for bedre forståelse:
Eksempel 1: Anvendelse af flertrinsanimation
I dette eksempel vil en flertrins-animation gælde for det valgte HTML-element. Besøg nedenstående demonstration:
< stil >
.animationExample {
bredde: 130px;
højde: 130px;
baggrundsfarve: skovgrøn;
stilling: relativ;
animation: moveAnimate 4s let-ind-ud uendelig;
}
< / stil >
< legeme >
< div klasse = 'animationseksempel' >< / div >
< / legeme >
I ovenstående kodestykke:
- Først hedder klassen ' animationEksempel ' er valgt inde i '
” tag. - Dernæst værdierne for ' 130 px ' er tildelt til ' højde ' og ' bredde ' ejendomme.
- Derudover indstilles ' skovgrøn ' og ' i forhold ' som en værdi for ' baggrundsfarve ' og ' position ” egenskaber for at forbedre visualisering.
- Brug derefter ' animation ' egenskab og sæt den lig med ' moveAnimate 4s let-ind-ud uendeligt ” for at anvende animationer.
- Værdien består af fire dele, den første er den brugerdefinerede navneanimation, den anden er varigheden af færdiggørelsen, den tredje er typen af animation, og den fjerde er grænsen for, hvor mange gange denne animation skal gælde.
- Til sidst skal du oprette et HTML-element og tildele ' animationEksempel ” klasse til det.
Brug nu ' keyframes ' regel for at definere den brugerdefinerede ' flytteAnimer ' animation:
@ moveAnimer keyframes {0 % {
venstre: 0 ;
baggrundsfarve: blå;
}
halvtreds % {
venstre: 200px;
baggrundsfarve: skovgrøn;
transformere: rotere ( 180 grader ) ;
}
100 % {
venstre: 0 ;
baggrundsfarve: blå;
}
}
I ovenstående kodeblok:
- For det første ' @keyframes ”-blok oprettes sammen med navnet på den brugerdefinerede animation, som skal defineres.
- Opret derefter en blok med navnet ' 0 % ”, der anvender CSS-stile i begyndelsen af animationen. Og brug ' baggrundsfarve ' og ' venstre ” CSS-egenskaber.
- Opret nu en blok med navnet og ' halvtreds% ” for at style midt i animationen. Det giver værdierne af ' 200 px ', ' skovgrøn ' og ' drej (180 grader) ” til “venstre”, “baggrundsfarve” og “transformer” egenskaber. Dette tillader det valgte element at rotere de venstre 200px.
Efter kompileringen af ovenstående kodeblok:
Outputtet viser, at flertrinsanimationen er blevet anvendt på det valgte HTML-element.
Eksempel 2: Anvendelse af flertrinsovergang
For at anvende flertrinsovergangen kan CSS-vælgerne bruges sammen med ' overgang ” ejendom. Besøg nedenstående kode:
.fade {
opacitet: 1;
overgang: opacitet 1s;
}
.fade:hover {
opacitet: 0;
}
<
/ stil>
<
krop>
< s klasse = 'falme' > Hold markøren over mig for at se overgangen. < / s >
< / legeme >
Forklaringen af ovenstående kode:
- For det første brugerdefinerede ' falme ” klasse er valgt, og værdien af 1 gives til ” Gennemsigtighed ” ejendom. Indstil også værdien af ' opacitet 1s ' til ' overgang ” CSS ejendom. Dette indstiller eller fjerner opaciteten i en tidsperiode på ' 1s '.
- Dernæst ' :hover ' vælgeren er tildelt til ' falme ' klasse. I den er værdien af ' 0 ” er indstillet til egenskaben opacitet.
- I sidste ende oprettes HTML-elementet inde i ' ' tag og klassen af ' falme ” er knyttet til den.
Efter afslutningen af kompileringsfasen ser websiden sådan ud:
GIF'en viser, at den tilpassede fade-overgang er blevet anvendt på det valgte HTML-element.
Konklusion
Flertrinsanimationerne og overgangene bringer liv til HTML-websiderne ved at tilføje bevægelse og visuelle effekter. Til animation, ' keyframes ' bruges sammen med varighedsprocenten som ' 0 % 'er starten', halvtreds% ' er midten, og ' 100 % ” er afslutningen på animationens varighed. Til overgangen kan CSS-vælgeren bruges sammen med ' overgang ' klasse. Denne artikel har demonstreret processen med at bruge flertrins animationer og overgange.