Wie spiele ich mehrere CSS-Animationen gleichzeitig ab?

Dieser Artikel zeigt eine praktische Demonstration zum gleichzeitigen Abspielen/Hinzufügen mehrerer CSS-Animationen.

Wie spiele ich mehrere CSS-Animationen gleichzeitig ab?

Durch die gleichzeitige Anwendung mehrerer CSS-Animationen können die Entwickler ganz einfach ansprechendere Benutzeroberflächen erstellen. Um viele CSS-Animationen gleichzeitig abzuspielen, geben Sie jeder einen eindeutigen Namen und wenden Sie diese Namen auf dieselben oder separate Komponenten auf der Seite an.

Befolgen Sie die nachstehenden Schritte, um mehr als eine Animation gleichzeitig abzuspielen/hinzuzufügen.

Schritt 1: Struktur erstellen

Erstellen Sie zunächst ein HTML-Element, in dem die Animationen in den nächsten Schritten angewendet werden. Das Bild wird beispielsweise eingefügt:

Im obigen Codeausschnitt:

• Zunächst wird der Bildpfad auf „ src ” Attribut.
• Als nächstes wird der Wert von „ 100px „wird für die CSS-Eigenschaften „width“ und „height“ bereitgestellt.
• Legen Sie außerdem den Wert „ animieren ' zum ' Klasse ” Attribut.

Schritt 2: Animationen einrichten

Der ' Schlüsselbilder „werden verwendet, um benutzerdefinierte Animationen entsprechend den Anforderungen der Webseite zu erstellen. Im folgenden Codeausschnitt werden beispielsweise zwei Animationen erstellt:

Im obigen Codeausschnitt:

• Zuerst die ' @-webkit-keyframes „Mechanismus wird genutzt, um“ drehen ' Und ' drehen ”benannte Animationen.
• Als nächstes verwenden Sie die „ verwandeln „Eigenschaft, die einen Wert von“ hat drehen() ' im ' drehen ” Animationskörper. Diese Funktion dreht das Element um einen Winkel von „ 180 Grad “.
• Stellen Sie anschließend die Animation ein, die das ursprüngliche Element um den Faktor „vergrößert“ oder erweitert. 1 ” sowohl in der „ X ' Und ' UND ”-Achse in der „ Skala ” Animationskörper.

Schritt 3: Anwenden von Animationen auf HTML-Elemente

Wählen Sie im CSS-Teil die Klasse „ animieren “, das dem „ zugeordnet ist ”-Tag und stellen Sie die folgenden CSS-Eigenschaften bereit:

Beschreibung der im obigen Codeblock verwendeten Eigenschaften:

• Stellen Sie zunächst den Wert „ ein. absolut „zum CSS“ Position ' Eigentum. Es richtet die „ Bild ”-Element gemäß der Animation.
• Geben Sie dann die Werte für „ 60 % “, „ 110px ' Und ' 110px „zum CSS“ links “, „ Breite ' Und ' Höhe ' Eigenschaften. Diese Eigenschaften werden verwendet, um die Position und Größe eines Elements festzulegen.
• Stellen Sie danach den Wert „ ein. Skala 3s unendlich linear ' zum ' -Webkit-Animation ” CSS-Eigenschaft.
• Und das ' 3s ” ist die Dauer dieser Animation, das „ unendlich „ ist die Dauer der Animation und das „ linear „ist die Richtung der Animation.
• Geben Sie am Ende die Werte an: „ Spin 2s unendlich linear „zum CSS“ -Webkit-Animation ' Eigentum. Diese Eigenschaft fügt die zweite Animation mit dem Namen „ drehen ' auf der ' Bild ' Element.

Nach der Kompilierung des obigen Codeblocks sieht die Animation folgendermaßen aus:

Das obige GIF zeigt, dass nur „ drehen Die Animation wird auf dem Zielelement abgespielt.

Schritt 4: Mehrere Animationen auf HTML-Elementen abspielen

Wie im obigen Schritt wurde nur eine Animation auf das Element angewendet. Dies liegt daran, dass dem gleichen Wert mehrere Werte zugewiesen wurden. -Webkit-Animation ' Eigentum.

Um dieses Problem zu beheben, umschließen Sie das Zielelement mit einem anderen HTML-Element. Als die ' div ” bereits im ersten Schritt als Wrapper verwendet wird, wählen Sie dessen „ Spanne ” und aktualisieren Sie den Code wie folgt:

Im obigen Code:

• Zunächst ist das „ animieren Die Klasse bleibt gleich und es wird nur die zweite Animation entfernt, die in der Klasse „ platziert wird. Spanne ' Klasse.
• Stellen Sie anschließend die Position ein, indem Sie „ Position ' Und ' Spitze ' Eigenschaften.

Nach der Ausführung des obigen Codeausschnitts sieht die Webseite nun wie folgt aus:

Die Ausgabe zeigt, dass beide Animationen gleichzeitig auf das ausgewählte HTML-Element angewendet wurden.

Abschluss

Um mehrere CSS-Eigenschaften anzuwenden, umschließen Sie das Element mit HTML-Elementen und wenden Sie Animationen darauf an, sodass jedes HTML-Element eine einzelne Animation enthält. Da die untergeordnete Eigenschaft die auf das übergeordnete HTML-Element angewendete Animation erbt, werden mehrere Animationen angewendet, ohne dass es zu Fehlern oder Unklarheiten für den Compiler kommt. Dies ist die Vorgehensweise zum gleichzeitigen Abspielen/Hinzufügen mehrerer CSS-Animationen.