HTML5 - Animaties

Animaties zijn effecten zoals overgangen, maar verbeterd in hun functionaliteit, in de zin dat er superieure controle is over wat kan worden gedaan, vanwege de beschikbaarheid van meer opties om wijzigingen van de ene stijl naar de andere aan te brengen.
Animatie-eigenschappen
Zoals we eerder hadden gezegd, zijn animaties verbeterde overgangen vanwege het aantal opties en eigenschappen waarmee we er meer controle over hebben. We gaan ze allemaal bekijken:

• animatie-vertraging: Pas een specifieke tijd toe om de animatie te kunnen starten zodra deze is geactiveerd.
• animatie-richting: Geeft aan of de animatie achteruit of in afwisselende cycli moet worden afgespeeld.
• animatieduur: Geeft het tijdsbestek aan waarin de animatie moet worden afgespeeld.
• animatie-iteratie-telling: Geeft het aantal keren aan dat de animatie moet worden herhaald en kan zelfs de waarde plaatsen eindeloos voor oneindige herhalingen van hetzelfde.
• animatienaam: Specificeert de naam van de animatie.
• animatie-afspeelstatus: Hiermee kan de animatie worden gepauzeerd en vervolgens worden afgespeeld.
• animatie-timing-functie: Specificeer hoe tussenliggende waarden moeten worden behandeld in de animatie
• animatie: Het is de snelkoppeling waarmee we alle animatie-eigenschappen in één CSS-declaratie kunnen opnemen en heeft de volgende structuur:

animatie:
Nu we de beschikbare eigenschappen kennen, laten we een voorbeeldcode bekijken om deze te analyseren:

 Voorbeeld
Er zijn veel verschillende soorten fruit - er zijn alleen al meer dan 500 soorten bananen. Tegen de tijd dat we de talloze soorten appels, sinaasappels en ander bekend fruit toevoegen, staan ​​we voor duizenden keuzes.

In dit voorbeeld zien we dat op het moment van doen : zweven op het element hebben we een vertraging van 100 ms, daarna heeft de animatie 500 ms om uit te voeren en wordt deze een oneindig aantal keren herhaald.
Dan zien we dat we met de naam die we de applicatie hebben gegeven de eigenschap zullen gebruiken @keyframes dat is waar we je zullen vertellen welke elementen zullen worden geanimeerd.
Laten we eens kijken hoe het eruit zou moeten zien in onze browser:

VERGROTEN

Zoals we zien is er een verandering in de achtergrond van het element dan de kleur van de letter en de grootte van het lettertype, aan het einde van de animatie keert het terug naar de oorspronkelijke staat en dit hele proces wordt opnieuw herhaald, dit geeft het een beweging die niet bestaat met het gebruik van overgangen.
Hiermee demonstreren we ook het belang van de animatienaam, aangezien deze werkt als de identifier om hem een @keyframes.
Hiermee ronden we de tutorial af en hiermee zijn we al in staat om basisanimaties uit te voeren, om zo meer beweging in onze documenten te brengen HTML.Vond je deze tutorial leuk en hielp je hem?Je kunt de auteur belonen door op deze knop te drukken om hem een ​​positief punt te geven