CSS-Animationen und Übergänge: Kurzanleitung

Einführung

CSS-Animationen und -Übergänge sind leistungsstarke Tools, die Ihre Webseiten zum Leben erwecken können. Sie ermöglichen es Ihnen, sanfte, ansprechende und optisch ansprechende Effekte zu erzeugen, die das Benutzererlebnis verbessern. Unabhängig davon, ob Sie einfache Übergänge zwischen Zuständen oder komplexe Animationen hinzufügen möchten, die Aufmerksamkeit erregen, ist es wichtig, die Grundlagen dieser Funktionen zu verstehen. In dieser Anleitung behandeln wir wie man einen Einblendeffekt erstellt, den Unterschied zwischen CSS-Übergängen und Animationen, das Erstellen einer unendlichen Keyframe-Animation, die Verzögerung des Starts von einen Übergang und Animations-Timing-Funktionen verwenden, um einen Bounce-Effekt zu erzeugen.

Sie können über die Codepens, die ich für jedes Beispiel hinzugefügt habe, mit dem Code interagieren und spielen!

Wie erstelle ich mithilfe von CSS-Animationen einen Einblendeffekt?

Um einen Einblendeffekt zu erzeugen, können Sie die @keyframes-Regel verwenden, um die Phasen der Animation zu definieren. Die Keyframes geben den Start- und Endstatus der Animation an und die Animationseigenschaft wendet die Animation auf ein Element an. Hier ist ein Beispiel:

In diesem Code:

• Die .fade-in-Klasse wendet die Einblendanimation über 2 Sekunden mit einer Easy-In-Out-Timing-Funktion an.

• Die @keyframes fadeIn-Regel definiert die Animation und ändert die Deckkraft von 0 auf 1.

Was ist der Unterschied zwischen CSS-Übergängen und Animationen?

CSS-Übergänge:

• Wird für einfache Zustandsänderungen verwendet, wenn ein Element von einem Zustand in einen anderen wechselt.

• Erfordern Sie einen Auslöser (wie :hover, :focus oder :checked), um den Übergang zu starten.

• Interpoliert automatisch die Eigenschaften vom Anfangszustand bis zum Endzustand.

In diesem Beispiel wechselt die Hintergrundfarbe des .box-Elements innerhalb von 0,5 Sekunden zu Blau, wenn Sie mit der Maus darüber fahren.

CSS-Animationen:

• Wird für komplexere Animationssequenzen verwendet, die mehrere Phasen umfassen.

• Mit @keyframes definiert und erfordert keinen Auslöser zum Starten.

• Kann automatisch ausgeführt werden, eine Endlosschleife bilden und mehr Kontrolle über Timing und Reihenfolge bieten.

In diesem Beispiel wendet die .rotate-Klasse eine kontinuierliche Rotationsanimation an, die alle 2 Sekunden eine vollständige Rotation durchführt.

Wie erstelle ich eine Keyframe-Animation, die unendlich läuft?

Um eine Animation zu erstellen, die unendlich läuft, verwenden Sie die Eigenschaft „animation-iteration-count“ mit dem Wert „infinite“. Dadurch wird die Animation auf unbestimmte Zeit wiederholt. Hier ist ein Beispiel:

Die .spin-Klasse bewirkt, dass sich das Element kontinuierlich dreht und alle 2 Sekunden eine vollständige Drehung durchführt.

Wie kann ich den Start eines CSS-Übergangs verzögern?

Um den Beginn eines Übergangs zu verzögern, verwenden Sie die Eigenschaft „transition-delay“. Diese Eigenschaft gibt an, wie lange der Übergang warten soll, bevor er beginnt. Hier ist ein Beispiel:

In diesem Beispiel ändert sich die Hintergrundfarbe 2 Sekunden nach Auslösung des :hover-Ereignisses in Hotpink und der Übergang dauert 0,5 Sekunden.

Wie verwende ich die Animation-Timing-Funktion, um einen Bounce-Effekt zu erzeugen?

Die Eigenschaft „animation-timing-function“ kann mit benutzerdefinierten Kubikbezier-Werten oder vordefinierten Schlüsselwörtern verwendet werden, um verschiedene Effekte zu erzeugen. Für einen Bounce-Effekt können Sie Keyframes definieren und Ease- oder benutzerdefinierte Kubik-Bezier-Werte verwenden. Hier ist ein Beispiel:

In diesem Beispiel:

• Die @keyframes-Bounce-Regel definiert den Bounce-Effekt durch das Bewegen des Elements nach oben und unten.

• Die .bounce-Klasse wendet die Bounce-Animation an, die alle 2 Sekunden auf unbestimmte Zeit wiederholt wird, mit einer Ease-Timing-Funktion.

Abschluss

Ich hoffe, dieser Artikel war hilfreich, bis zum nächsten!

Das obige ist der detaillierte Inhalt vonCSS-Animationen und Übergänge: Kurzanleitung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!