HTML5 - Animationen

Animationen sind Effekte wie Übergänge, die jedoch in ihrer Funktionalität verbessert sind, in dem Sinne, dass aufgrund der Verfügbarkeit von mehr Optionen für Änderungen von einem Stil zum anderen eine bessere Kontrolle darüber besteht, was getan werden kann.
Animationseigenschaften
Wie bereits erwähnt, handelt es sich bei Animationen um verbesserte Übergänge aufgrund der Anzahl der Optionen und Eigenschaften, die es uns ermöglichen, eine bessere Kontrolle über sie zu haben. Wir werden jeden von ihnen überprüfen:

• Animationsverzögerung: Wenden Sie eine bestimmte Zeit an, um die Animation starten zu können, sobald sie aktiviert ist.
• Animations-Richtung: Gibt an, ob die Animation rückwärts oder in abwechselnden Zyklen abgespielt werden soll.
• Animationsdauer: Gibt den Zeitbereich an, in dem die Animation abgespielt werden soll.
• Animation-Iterations-Anzahl: Gibt an, wie oft die Animation wiederholt werden muss, und kann sogar den Wert platzieren unendlich für unendliche Wiederholungen desselben.
• Animationsname: Gibt den Namen der Animation an.
• Animations-Spielzustand: Ermöglicht das Anhalten der Animation und das Fortsetzen der Wiedergabe.
• Animation-Timing-Funktion: Geben Sie an, wie Zwischenwerte in der Animation behandelt werden sollen
• Animation: Es ist die Abkürzung, mit der wir alle Animationseigenschaften in eine einzige CSS-Deklaration einbinden können und hat die folgende Struktur:

Animation:
Nachdem wir nun die verfügbaren Eigenschaften kennen, sehen wir uns einen Beispielcode zur Analyse 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.

In diesem Beispiel sehen wir das zum Zeitpunkt des Tuns : schweben auf dem Element haben wir eine Verzögerung von 100 ms, dann hat die Animation 500 ms Zeit und wird unendlich oft wiederholt.
Dann sehen wir, dass wir mit dem Namen, den wir der Anwendung gegeben haben, die Eigenschaft verwenden werden @keyframes Dort verraten wir Ihnen, welche Elemente animiert werden.
Sehen wir uns an, wie es in unserem Browser aussehen sollte:

VERGRÖSSERN

Wie wir sehen, ändert sich der Hintergrund des Elements, dann die Farbe des Buchstabens und die Größe der Schrift, am Ende der Animation kehrt es in den Ausgangszustand zurück und dieser ganze Vorgang wird erneut wiederholt, das gibt ihm a Bewegung, die es mit Übergängen nicht gibt.
Damit demonstrieren wir auch die Bedeutung des Animationsnamens, da er als Bezeichner dient, um ihn a zuweisen zu können @keyframes.
Damit beenden wir das Tutorial und können damit bereits grundlegende Animationen ausführen, um unseren Dokumenten mehr Bewegung zu verleihen HTML.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