Dit artikel demonstreert een praktische demonstratie om meerdere CSS-animaties tegelijkertijd af te spelen/toe te voegen.
Hoe speel je meerdere CSS-animaties tegelijkertijd af?
Door meerdere CSS-animaties tegelijkertijd toe te passen, kunnen de ontwikkelaars eenvoudig aantrekkelijkere interfaces maken. Om veel CSS-animaties tegelijkertijd af te spelen, geeft u elke animatie een unieke naam en past u die namen toe op dezelfde of afzonderlijke componenten op de pagina.
Volg de onderstaande procedure om meer dan één animatie tegelijk af te spelen/toe te voegen.
Stap 1: creatie van structuur
Maak eerst een HTML-element waarin de animaties in de komende stappen worden toegepast. De afbeelding wordt bijvoorbeeld ingevoegd:
< div klas = 'span' >
< img src = 'boek.jpg' hoogte = '100 pixels' breedte = '100 pixels' klas = 'animeren' >
< / div >
In het bovenstaande codefragment:
- Eerst wordt het afbeeldingspad ingesteld op de ' src ” attribuut.
- Vervolgens de waarde van ' 100px ' wordt geleverd aan de CSS-eigenschappen 'width' en 'height'.
- Stel ook de waarde in van ' animeren ' naar de ' klas ” attribuut.
Stap 2: Animaties instellen
De ' sleutelframes ” worden gebruikt om aangepaste animaties te maken volgens de behoefte van de webpagina. Er worden bijvoorbeeld twee animaties gemaakt in het onderstaande codefragment:
@-webkit-keyframes draaien {100 % {
transformeren: roteren ( 180 graden ) ;
}
}
@-webkit-keyframes schaal {
100 % {
transformeren: schaalX ( 1 ) schaalY ( 1 ) ;
}
}
In het bovenstaande codefragment:
- Eerst de ' @-webkit-keyframes 'mechanisme wordt gebruikt om in te stellen' draaien ' En ' draaien ' genaamd animaties.
- Gebruik vervolgens de ' transformeren ” eigenschap die een waarde heeft van de “ draaien() ' in de ' draaien ” animatie lichaam. Deze functie roteert het element onder een hoek van ' 180 graden ”.
- Stel daarna de animatie in die het oorspronkelijke element laat groeien of uitbreiden met een factor ' 1 ” in zowel de “ X ' En ' EN ” as in de “ schaal ” animatie lichaam.
Stap 3: Animatie toepassen op HTML-elementen
Selecteer in het CSS-gedeelte de klasse ' animeren ” die is toegewezen aan de “ ”-tag en geef de volgende CSS-eigenschappen op:
positie: absoluut;
links: 60 %;
breedte : 110px;
hoogte : 110 pixels;
marge: -40px 0 0 -40px;
-webkit-animatie: schaal 3s oneindig lineair;
-webkit-animatie: spin 2s oneindig lineair;
}
Beschrijving van de eigenschappen die in het bovenstaande codeblok worden gebruikt:
- Stel eerst de waarde in van ' absoluut ” naar de CSS “ positie ' eigendom. Het stemt de “ img ”-element volgens de animatie.
- Geef vervolgens de waarden op van ' 60% ”, “ 110px ' En ' 110px ” naar de CSS “ links ”, “ breedte ' En ' hoogte ' eigenschappen. Deze eigenschappen worden gebruikt om de positie en grootte van een element in te stellen.
- Stel daarna de waarde in van ' schaal 3s oneindig lineair ' naar de ' -webkit-animatie ” CSS-eigenschap.
- En de ' 3s ” is de duur van die animatie, de “ oneindig ” is de duur van de animatie en de “ lineair ” is de richting van de animatie.
- Geef ten slotte de waarden van ' spin 2s oneindig lineair ” naar de CSS “ -webkit-animatie ' eigendom. Deze eigenschap voegt de tweede animatie met de naam ' draaien ' op de ' img ”-element.
Na de compilatie van het bovenstaande codeblok ziet de animatie er als volgt uit:
De bovenstaande gif illustreert dat alleen ' draaien ” Er wordt animatie afgespeeld op het beoogde element.
Stap 4: Meerdere animaties afspelen op HTML-elementen
Net als in de bovenstaande stap is er slechts één animatie op het element toegepast. Dit komt omdat er meerdere waarden zijn toegewezen aan hetzelfde “ -webkit-animatie ' eigendom.
Om dit probleem op te lossen, plaatst u het doelelement in een ander HTML-element. als de ' div ' al in de eerste stap als wikkel wordt gebruikt, selecteert u de ' span ” en werk de code bij zoals:
.animeren {positie: absoluut;
links: 60 %;
breedte : 110px;
hoogte : 110px;
marge:-40px 0 0 -40px;
-webkit-animatie: schaal 3s oneindig lineair;
}
. span {
positie: relatief;
boven: 160px;
-webkit-animatie: spin 2s oneindig lineair;
}
In bovenstaande code:
- In eerste instantie de ' animeren ” klasse blijft hetzelfde en alleen de tweede animatie wordt eruit verwijderd die in de “ span ' klas.
- Stel daarna de positie in met behulp van de ' positie ' En ' bovenkant ' eigenschappen.
Na de uitvoering van het bovenstaande codefragment ziet de webpagina er nu als volgt uit:
De uitvoer laat zien dat beide animaties tegelijkertijd op het geselecteerde HTML-element zijn toegepast.
Conclusie
Om meerdere CSS-eigenschappen toe te passen, omwikkelt u het element met HTML-elementen en past u er animaties op toe zodat elk HTML-element een enkele animatie bevat. Aangezien de onderliggende eigenschap de animatie overerft die is toegepast op het bovenliggende HTML-element, worden meerdere animaties toegepast zonder fouten of dubbelzinnigheid voor de compiler te veroorzaken. Dat is de procedure om meer dan één CSS-animatie tegelijkertijd af te spelen/toe te voegen.