Dit artikel demonstreert het proces van het toevoegen van animaties en overgangen met meerdere stappen.
Hoe animaties en overgangen in meerdere stappen gebruiken?
Om een animatie met meerdere stappen te maken, wordt een reeks keyframes gegenereerd. Het specificeert de reeks wijzigingen die moet worden toegepast op het geselecteerde HTML-element. Elk keyframe vertegenwoordigt een andere status van de animatie, en de browser zorgt voor een soepele overgang van het element tussen deze statussen. Specificeer tijdens overgangen de soepele verandering van CSS-eigenschappen gedurende een opgegeven duur door gebruikersinteracties of statuswijzigingen.
Laten we een praktisch voorbeeld doornemen voor een beter begrip:
Voorbeeld 1: Animatie met meerdere stappen toepassen
In dit voorbeeld wordt een animatie met meerdere stappen toegepast op het geselecteerde HTML-element. Bezoek onderstaande demonstratie:
< stijl >
.animatieVoorbeeld {
breedte: 130px;
hoogte: 130px;
achtergrondkleur: bosgroen;
positie: relatief;
animatie: moveAnimate 4s gemak-in-out oneindig;
}
< / stijl >
< lichaam >
< div klas = 'animatieVoorbeeld' >< / div >
< / lichaam >
In het bovenstaande codefragment:
- Eerst de klas met de naam ' animatieVoorbeeld ' is geselecteerd in de '
' label. - Vervolgens de waarden van ' 130px ” zijn toegewezen aan de “ hoogte ' En ' breedte ' eigenschappen.
- Stel daarnaast “ Bos Groen ' En ' familielid ” als een waarde voor de “ Achtergrond kleur ' En ' positie ” eigenschappen om de visualisatie te verbeteren.
- Gebruik daarna de ' animatie ” eigenschap en stel deze gelijk aan “ moveAnimate 4s gaat oneindig gemakkelijk in en uit ” om animaties toe te passen.
- De waarde bestaat uit vier delen, de eerste is de aangepaste naamanimatie, de tweede is de tijdsduur om te voltooien, de derde is het type animatie en de vierde is de limiet voor het aantal keren dat deze animatie wordt toegepast.
- Maak uiteindelijk een HTML-element en wijs de ' animatieVoorbeeld Klasse erbij.
Gebruik nu de ' sleutelframes 'regel om de gewoonte te definiëren' moveAnimate ” animatie:
@ moveAnimate-hoofdframes {0 % {
links: 0 ;
achtergrondkleur: blauw;
}
vijftig % {
links: 200px;
achtergrondkleur: bosgroen;
transformeren: roteren ( 180 graden ) ;
}
100 % {
links: 0 ;
achtergrondkleur: blauw;
}
}
In het bovenstaande codeblok:
- Eerst de ' @sleutelframes ”-blok wordt gemaakt samen met de naam van de aangepaste animatie die zal worden gedefinieerd.
- Maak vervolgens een blok met de naam ' 0% ” dat CSS-stijlen toepast aan het begin van de animatie. En gebruik de ' Achtergrond kleur ' En ' links ” CSS-eigenschappen.
- Maak nu een blok met de naam en ' vijftig% 'te stylen midden in de animatie. Het biedt de waarden van ' 200px ”, “ Bos Groen ' En ' roteren (180 graden) ' naar de eigenschappen 'links', 'achtergrondkleur' en 'transformeren'. Hierdoor kan het geselecteerde element naar links 200px draaien.
Na de compilatie van het bovenstaande codeblok:
De uitvoer toont dat de animatie met meerdere stappen is toegepast op het geselecteerde HTML-element.
Voorbeeld 2: Overgang met meerdere stappen toepassen
Om de meerstapsovergang toe te passen, kunnen de CSS-kiezers worden gebruikt samen met de ' overgang ' eigendom. Bezoek de onderstaande code:
.vervagen {
dekking: 1;
overgang: dekking 1s;
}
.fade: zweef {
dekking: 0;
}
<
/ stijl>
<
lichaam>
< P klas = 'vervagen' > Beweeg over mij om de overgang te zien. < / P >
< / lichaam >
De uitleg van de bovenstaande code:
- Eerst de gewoonte “ vervagen ” klasse is geselecteerd en de waarde 1 wordt gegeven aan de “ ondoorzichtigheid ' eigendom. Stel ook de waarde in van ' ondoorzichtigheid 1s ' naar de ' overgang ” CSS-eigenschap. Hiermee wordt de dekking ingesteld of verwijderd in een tijdsduur van ' 1s ”.
- Vervolgens de “ :zweven ” selector is toegewezen aan de “ vervagen ' klas. Daarin wordt de waarde van ' 0 ” is ingesteld op de eigenschap ondoorzichtigheid.
- Uiteindelijk wordt het HTML-element gemaakt in de '
” tag, en de klasse van “ vervagen ’ zit eraan vast.
Na het einde van de compilatiefase ziet de webpagina er als volgt uit:
De GIF geeft aan dat de aangepaste fade-overgang is toegepast op het geselecteerde HTML-element.
Conclusie
De meerstapsanimaties en -overgangen brengen de HTML-webpagina's tot leven door beweging en visuele effecten toe te voegen. Voor animatie, de ' sleutelframes ” worden gebruikt samen met het duurpercentage zoals “ 0% ” is het begin, “ vijftig% ” is het midden, en “ 100% ” is het einde van de animatieduur. Voor de overgang kan de CSS-kiezer worden gebruikt samen met de ' overgang ' klas. Dit artikel heeft het proces gedemonstreerd van het gebruik van animaties en overgangen met meerdere stappen.