✅ HTML5 - Übergänge | Entwicklung 2024

Inhaltsverzeichnis

Übergänge gehören zu einer neuen Reihe von Effekten, die in HTML5 und das lässt sich mit einstellen CSS3Früher mussten diese Art von Effekten von Javascript mit einer der vielen verfügbaren Bibliotheken und Frameworks (Mootools, Jquery usw.) ausgeführt werden, aber mit der Einführung des neuen Standards wurden solche Effekte wie Übergänge, Animationen, Transformationen integriert . .
Übergänge verwenden
Bevor wir sehen, wie man einen Übergang verwendet, müssen wir wissen, was er ist. Wir wissen, dass, wenn wir eine Änderung mit der Eigenschaft vornehmen : schweben Wenn Sie mit der Maus über das Element fahren, wird sofort der zugewiesene Stil übernommen, wenn sich die Maus darüber befindet. Ein Übergang ist nichts anderes als die Kontrolle darüber, wie diese Änderung vorgenommen wird, dh die Dauer der Änderung, die Geschwindigkeit bei die durchgeführt werden soll, um eine Wirkung wie eine Mischung aus altem und neuem Zustand zu erzielen.
Wir können also zusammenfassen, dass der Übergang der Übergang von einem Zustand in einen anderen innerhalb des HTML-Dokuments und alle Eigenschaften ist, mit denen diese Änderung vorgenommen werden kann. Im folgenden Bild sehen wir einen Anfangszustand und einen Endzustand, der Übergang ist das, was passiert Zwischen beiden.

VERGRÖSSERN
Übergangseigenschaften
Sehen wir uns die Eigenschaften und Attribute an, die wir für einen Übergang verwenden können:

Übergangsverzögerung: Gibt eine Verzögerung in Zeiteinheit an, nach der die Effektanwendung gestartet wird.
Übergangszeit: Gibt die Zeit an, für die der Übergang erfolgen soll.
Übergangseigenschaft: Gibt an, auf welche Eigenschaft der Übergang angewendet werden soll.
Übergangs-Timing-Funktion: Gibt an, wie Zwischenwerte während der Ausführung des Übergangs behandelt werden.
Überleitung: Es ist die Abkürzung, mit der wir alle Eigenschaften des Übergangs in einer einzigen CSS-Deklaration anwenden können. Es lässt sich wie folgt zusammenfassen: Übergang:

Das müssen wir betonen Übergangsverzögerung Ja Übergangszeit verwenden Zeiteinheiten als Werte, müssen also mit angegeben werden S Sekunden oder Frau Millisekunden.
Sehen wir uns ein Beispiel für einen Übergang für ein Element in an HTML5, sehen wir uns den folgenden Code an:

Beispiel

Es gibt viele verschiedene Obstsorten – allein von Bananen gibt es über 500 Sorten. Wenn wir die unzähligen Apfel-, Orangen- und anderen bekannten Obstsorten hinzufügen, stehen wir vor Tausenden von Möglichkeiten.

Wie wir sehen, haben wir die unterschiedlichen Eigenschaften des Übergangselementes mit dem Präfix -webkit, dies versichert uns, dass es für Browser erfüllt wird Chrom Ja Safari, um sie zu implementieren für Feuerfuchs Ja Oper wir müssen auch die Präfixe -moz und -o einschließen.
Wir können auch feststellen, dass wir die verzögern in 100 ms, was bedeutet, dass es eine kleine Verzögerung gibt, bevor der Übergang beginnt, dann sollte die gesamte Dauer des Effekts 500 ms dauern, was in festgelegt ist Dauer.
Sehen wir uns ein Bild mit allen Phasen des Effekts an:

VERGRÖSSERN
Wie wir sehen können, bewirkt der Übergang, dass der Effekt während der angegebenen Zeit allmählich angewendet wird.
Damit beenden wir das Tutorial zum Anwenden des Übergangseffekts auf ein Element in HTML5, müssen wir weiter üben, bis es selbstverständlich wird, den erforderlichen Code zu platzieren, damit unsere Dokumente und Seiten eine größere Dynamik erreichen.Hat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben