Denne artikel demonstrerer en praktisk demonstration til at afspille/tilføje flere CSS-animationer på samme tid.
Hvordan spiller man flere CSS-animationer på samme tid?
Ved at anvende flere CSS-animationer på samme tid, kan udviklerne nemt skabe mere engagerende grænseflader. For at afspille mange CSS-animationer på samme tid skal du give hver enkelt et unikt navn og anvende disse navne på de samme eller separate komponenter på siden.
Følg nedenstående procedure for at afspille/tilføje mere end én animation på samme tid.
Trin 1: Oprettelse af struktur
Først skal du oprette et HTML-element, hvor animationerne bliver anvendt i kommende trin. For eksempel vil billedet blive indsat:
< div klasse = 'span' >
< img src = 'bog.jpg' højde = '100px' bredde = '100px' klasse = 'animere' >
< / div >
I ovenstående kodestykke:
- Først indstilles billedstien til ' src ' attribut.
- Dernæst værdien af ' 100 px ” leveres til CSS-egenskaberne “bredde” og “højde”.
- Indstil også værdien af ' animere ' til ' klasse ' attribut.
Trin 2: Opsætning af animationer
Det ' keyframes ” bruges til at skabe brugerdefinerede animationer i henhold til behovet på websiden. For eksempel oprettes to animationer i nedenstående kodestykke:
@-webkit-keyframes spin {100 % {
transformere: rotere ( 180 grader ) ;
}
}
@-webkit-keyframes skala {
100 % {
transform: scaleX ( 1 ) skalaY ( 1 ) ;
}
}
I ovenstående kodestykke:
- For det første ' @-webkit-keyframes ' mekanisme bliver brugt til at konfigurere ' spin ' og ' rotere ” navngivne animationer.
- Brug derefter ' transformere ' ejendom, som har en værdi af ' rotere() ' i ' spin ” animationslegeme. Denne funktion roterer elementet i en vinkel på ' 180 grader '.
- Indstil derefter den animation, der vokser eller udvider det originale element med en faktor på ' 1 'i både ' x ' og ' OG ' aksen i ' vægt ” animationslegeme.
Trin 3: Anvendelse af animation på HTML-elementer
Inde i CSS-delen skal du vælge klassen ' animere ' som er tildelt ' ” tag, og angiv følgende CSS-egenskaber:
position: absolut;
venstre: 60 %;
bredde : 110px;
højde : 110px;
margin: -40px 0 0 -40px;
-webkit-animation: skala 3s uendelig lineær;
-webkit-animation: spin 2s uendelig lineær;
}
Beskrivelse af egenskaberne brugt i ovenstående kodeblok:
- Indstil først værdien af ' absolut ' til CSS ' position ” ejendom. Det justerer ' img ”-element ifølge animationen.
- Angiv derefter værdierne for ' 60 % ', ' 110 px ' og ' 110 px ' til CSS ' venstre ', ' bredde ' og ' højde ' ejendomme. Disse egenskaber bruges til at indstille positionen og størrelsen af et element.
- Indstil derefter værdien af ' skala 3s uendelig lineær ' til ' -webkit-animation ” CSS ejendom.
- Og ' 3s ' er varigheden af den animation, ' uendelig ' er varigheden af animationen, og ' lineær ” er retningen for animationen.
- Til sidst skal du angive værdierne for ' spin 2s uendelig lineær ' til CSS ' -webkit-animation ” ejendom. Denne egenskab tilføjer den anden animation med navnet ' spin ' på den ' img ' element.
Efter kompileringen af ovenstående kodeblok ser animationen sådan ud:
Ovenstående gif illustrerer, at kun ' spin ” animation afspilles på det målrettede element.
Trin 4: Afspilning af flere animationer på HTML-elementer
Som i ovenstående trin er der kun anvendt én animation på elementet. Dette skyldes, at flere værdier er blevet tildelt den samme ' -webkit-animation ” ejendom.
For at løse dette problem skal du indpakke målelementet med et andet HTML-element. Som ' div ' allerede bruges som indpakning i det første trin, vælg dens ' span ' og opdater koden som:
.animere {position: absolut;
venstre: 60 %;
bredde : 110px;
højde : 110px;
margin: -40px 0 0 -40px;
-webkit-animation: skala 3s uendelig lineær;
}
. span {
stilling: relativ;
top: 160px;
-webkit-animation: spin 2s uendelig lineær;
}
I ovenstående kode:
- I første omgang var ' animere '-klassen forbliver den samme, og kun den anden animation fjernes fra den, som er placeret i ' span ' klasse.
- Indstil derefter positionen ved at bruge ' position ' og ' top ' ejendomme.
Efter udførelsen af ovenstående kodestykke ser websiden nu sådan ud:
Outputtet viser, at begge animationer er blevet anvendt på det valgte HTML-element på samme tid.
Konklusion
For at anvende flere CSS-egenskaber skal du indpakke elementet med HTML-elementer og anvende animationer på dem, så hvert HTML-element indeholder en enkelt animation. Efterhånden som den underordnede egenskab arver animationen anvendt på det overordnede HTML-element, anvendes flere animationer uden at forårsage fejl eller tvetydighed for compileren. Det er proceduren for at afspille/tilføje mere end én CSS-animation på samme tid.