HTML5 - Overgangen

Overgangen behoren tot een nieuwe reeks effecten die zijn opgenomen in HTML5 en dat kan worden aangepast met CSS3Voorheen moesten dit soort effecten worden uitgevoerd door Javascript met behulp van een van de vele beschikbare bibliotheken en frameworks (Mootools, JQuery, etc.), maar toen de nieuwe standaard werd geïntroduceerd, werden dergelijke effecten opgenomen, zoals overgangen, animaties, transformaties .
Overgangen gebruiken
Voordat we zien hoe we een overgang moeten gebruiken, moeten we weten wat het is. We weten dat wanneer we een wijziging toepassen met de eigenschap : zweven wanneer je met de muis over het element beweegt, neemt het onmiddellijk de toegewezen stijl aan wanneer de muis erover gaat, een overgang is niets meer dan controle over hoe die wijziging zal worden aangebracht, dat wil zeggen, de duur van de wijziging, de snelheid bij die zal worden uitgevoerd, om een ​​effect te bereiken als een mengeling van de oude en de nieuwe staat.
We kunnen dan samenvatten dat de overgang de overgang is van de ene toestand naar de andere binnen het HTML-document en alle eigenschappen waarmee deze wijziging kan worden aangebracht, in de volgende afbeelding zien we een begintoestand en een eindtoestand, de overgang is wat er gebeurt Tussen beide.
VERGROTEN
Overgangseigenschappen
Laten we eens kijken naar de eigenschappen en attributen die we kunnen gebruiken om een ​​overgang te maken:

• overgangsvertraging: Specificeert een vertraging in tijdseenheid waarna de effecttoepassing zal starten.
• overgangsduur: Specificeert de tijd gedurende welke de overgang moet plaatsvinden.
• overgangseigenschap: Specificeert op welke eigenschap de overgang moet worden toegepast.
• overgang-timing-functie: Specificeert de manier waarop tussenwaarden worden behandeld tijdens het uitvoeren van de overgang.
• overgang: Het is de sneltoets waarmee we alle eigenschappen van de overgang in één CSS-declaratie kunnen toepassen. Het kan als volgt worden samengevat: transitie:

We moeten benadrukken dat overgangsvertraging Y overgangsduur gebruik tijdseenheden als waarden, dus moet worden opgegeven met s seconden of Mevrouw milliseconden.
Laten we een voorbeeld bekijken van hoe u een overgang kunt maken voor een element in HTML5, laten we de volgende code eens bekijken:

 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.

Zoals we kunnen zien, hebben we de verschillende eigenschappen van het overgangselement geïmplementeerd met behulp van het voorvoegsel -webkit, dit verzekert ons dat het zal worden vervuld voor browsers Chroom Y Safari, om ze te implementeren voor Firefox Y Opera we moeten ook de voorvoegsels -moz en -o opnemen.
We kunnen ook opmerken dat we de vertraging in 100 ms, wat betekent dat het een kleine vertraging zal hebben voordat de overgang wordt gestart, dan zou de volledige duur van het effect 500 ms moeten duren, wat is vastgelegd in duur.
Laten we een afbeelding bekijken met alle fasen van het effect:
VERGROTEN
Zoals we kunnen zien, zorgt de overgang ervoor dat het effect geleidelijk wordt toegepast gedurende de opgegeven tijd.
Hiermee ronden we de tutorial af over het toepassen van het overgangseffect op een element in HTML5, moeten we blijven oefenen totdat het natuurlijk wordt om de vereiste code te plaatsen, zodat onze documenten en pagina's een grotere dynamiek krijgen.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