Wie man Animation in CSS dreht

Im Web spielt die Animation eine Schlüsselrolle, um Benutzer anzulocken. Ein Benutzer interessiert eher ein Interesse an einer animierten Website als an einer statischen. Mit der Verwendung des CSS “AnimationEigentum, wir können jedes Element animieren. Diese Eigenschaft ermöglicht es uns, die Website attraktiver und eleganter zu machen. Es verändert die Elementstile allmählich.

In diesem Handbuch lernen wir uns über rotierende Animationen in CSS aus.

Wie man Animation in CSS dreht?

Durch rotierende Animation kann ein Element sein Erscheinungsbild für einen Mittelzeitraum ändern. Zur Drehanimation die “Animation”Eigenschaft von CSS wird verwendet. Wir können diese Eigenschaft in jedem Element von HTML -wie Bild, SVG, Text und vielen anderen anwenden.

Jetzt werden wir die folgenden Punkte besprechen:

• • Animationseigenschaft
  • Syntax der Animationseigenschaften
  • So führen Sie eine rotierende Animation mit CSS durch?

So verwenden Sie die Eigenschaft "Animation" in CSS?

Der "AnimationDie Eigenschaft ermöglicht das Ändern des Elementstils von einem zum anderen. Geben Sie dazu den Namen der Animation, die Geschwindigkeit, die Animationszahl und die Drehrichtung gemäß der folgenden Syntax an.

Syntax

Animation: Animationsname-Speed-Iterations-Zählrichtung;

• • Animationsname: Es repräsentiert den Namen einer Animation (integriert oder benutzerdefiniert (mit Keyframes)).
  • Geschwindigkeit: Es wird verwendet, um die Animation zu verlangsamen und zu beschleunigen. Zum Beispiel, "2s”(Für zwei Sekunden).
  • Iterationszählige: Es zeigt an, wie oft Ihre Animation fortgesetzt werden soll.
  • Richtung: Es gibt an, wie eine Animation gespielt wird, z. B. vorwärts, rückwärts oder abwechselnd.

Lassen Sie uns nach dem Verständnis der grundlegenden Syntax der Animationseigenschaften in die praktische Arbeit einsteigen und verstehen, wie eine rotierende Animation mit CSS erstellt wird.

Beispiel: Drehen Sie das HTML -Objekt im Bild in CSS

Schreiben Sie in HTML den Code des Elements, das Sie drehen möchten. Hier drehen wir uns ein SVG -Symbol:

Wenden wir die Rotationsanimation in CSS an. Hier das ".drehen”Wird verwendet, um auf die Klasse zugegriffen zu werden, die dem ausgewählten Bild zugewiesen ist, auf das wir in CSS drehen möchten. Als nächstes setzen wir die Breite des Bildes auf “100px”Und drehen Sie es in 2 Sekunden für eine unendliche Häufigkeit in einem linearen Muster. Sie können jedoch die Geschwindigkeit, Iterationszählung und Richtung gemäß Ihrer Wahl ändern:

.drehen
Breite: 100px;
Animation: Rotation 2S Infinite Linear;

Die @KeyFrames werden verwendet, um den Start- und Endpunkt der Animation zu definieren (mit “aus" Und "Zu" Schlüsselwörter). Darüber hinaus geben Sie den Animationsnamen an “Drehung”Gefolgt von den @Keyframes, auf die Sie animieren möchten. Da wir die Animation kreisförmig bewegen wollen, verwenden Sie also die “drehen()"Funktion der Transformation Eigenschaft, in der wir von" beginnen "0 GradUnd enden bei "359 Grad”:

@keyframes Rotation
aus
Transformation: Drehen (0DEG);

Zu
Transformation: Drehung (359 Grad);

Gehen Sie nach der Implementierung des CSS -Code in die HTML -Datei und führen Sie ihn aus, um das folgende Ergebnis zu erhalten:

Mit der Verwendung der “AnimationEigentum, wir haben ein Element über einen definierten Zeitraum erfolgreich gedreht.

Abschluss

Um eine rotierende Animation in CSS zu erstellen, verwenden Sie die Animationseigenschaft und setzen Sie den Wert von Animationen wie Dauer, Richtung und Geschwindigkeit fest. Darüber hinaus wird die rotate () CSS -Funktion verwendet, um ein Element kreisförmig in der Transformationseigenschaft zu drehen. In diesem Artikel wurde die Animationseigenschaft im Detail erläutert, um eine Animation für eine unendliche Häufigkeit zu drehen.