CSS-Animationen – Elemente zum Leben erwecken

Vorlesung 13: CSS-Animationen – Elemente zum Leben erwecken

Willkommen zur Vorlesung 13 des Kurses „Basic to Brilliance“! In diesem Beitrag beschäftigen wir uns mit CSS-Animationen – einer leistungsstarken Möglichkeit, Ihren Webelementen Leben einzuhauchen, indem Sie sie im Laufe der Zeit animieren. Mit CSS-Animationen können Sie sanfte, dynamische Effekte erstellen, die das Benutzererlebnis und das Engagement verbessern.

1. Übersicht über CSS-Animationen

CSS-Animationen ermöglichen den Übergang von Elementen zwischen verschiedenen Stilen über einen definierten Zeitraum. Sie können die Funktionsweise der Animation mithilfe von zwei Schlüsseleigenschaften steuern:

• @keyframes: Definiert das Verhalten der Animation zu bestimmten Zeitpunkten.
• Animation: Wendet die Animation auf ein Element an und steuert dessen Timing und Dauer.

2. Die @keyframes-Regel

Die @keyframes-Regel gibt die Stile an, die das Element an verschiedenen Stellen während der Animation haben soll. Sie definieren Keyframes in verschiedenen Prozentsätzen (0 % ist der Anfang, 100 % das Ende).

• Beispiel: Einfache Keyframe-Animation zum Ändern der Hintergrundfarbe.

  @keyframes changeColor {
    0% {
      background-color: red;
    }
    100% {
      background-color: blue;
    }
  }

In diesem Beispiel:

• Die Hintergrundfarbe ändert sich im Verlauf der Animation allmählich von Rot zu Blau.

3. Anwenden von Animationen mit der Animationseigenschaft

Um die Animation auf ein Element anzuwenden, verwenden Sie die Animationseigenschaft. Für diese Eigenschaft sind einige Schlüsselwerte erforderlich:

• Name: Der Name der Keyframes-Animation (z. B. changeColor).
• Dauer: Wie lange die Animation laufen soll (z. B. 2s für 2 Sekunden).
• Timing-Funktion: Die Geschwindigkeitskurve der Animation (z. B. Leichtigkeit, linear).

• Verzögerung: Wie lange muss gewartet werden, bevor die Animation gestartet wird.

• Beispiel: Anwenden einer Animation auf ein Element.
  

  .box {
    animation: changeColor 2s ease-in-out infinite;
  }

In diesem Fall:

• Das .box-Element ändert innerhalb von 2 Sekunden seine Farbe von Rot nach Blau und folgt einer Ease-In-Out-Kurve, und die Animation wird unendlich wiederholt.

4. Animations-Timing-Funktionen

Die Timing-Funktion steuert, wie die Animation im Laufe der Zeit verläuft. Einige gängige Timing-Funktionen sind:

• linear: Die Animation schreitet mit konstanter Geschwindigkeit voran.
• Einfachheit: Die Animation beginnt langsam, beschleunigt sich und verlangsamt sich dann.
• ease-in: Die Animation beginnt langsam und wird dann schneller.

• ease-out: Die Animation startet schnell und verlangsamt sich.

• Beispiel: Anwenden einer anderen Timing-Funktion.
  

  .box {
    animation: changeColor 3s linear;
  }

Hier:

• Die Animation läuft mit konstanter Geschwindigkeit weiter und dauert 3 Sekunden.

5. Animationsiteration und -verzögerung

Mit der Eigenschaft „animation-iteration-count“ können Sie steuern, wie oft eine Animation wiederholt wird. Sie können den Start der Animation auch mit der Animationsverzögerung verzögern.

• Beispiel: Eine Animation, die dreimal wiederholt wird und nach einer Verzögerung von 1 Sekunde startet.

  .box {
    animation: changeColor 2s ease-in 3;
    animation-delay: 1s;
  }

In diesem Fall:

• Die Animation beginnt 1 Sekunde nach dem Laden der Seite und wird dreimal wiederholt.

6. Animationsfüllmodus

Die Eigenschaft „animation-fill-mode“ definiert, wie ein Element vor und nach der Animation aussehen soll. Zu den allgemeinen Werten gehören:

• keine: Das Element kehrt nach der Animation in seinen ursprünglichen Zustand zurück.
• Vorwärts: Das Element behält den Endzustand der Animation bei.

• rückwärts: Das Element nimmt den Ausgangszustand ein, bevor die Animation beginnt.

• Beispiel: Beibehaltung des Endzustands nach der Animation.
  

  .box {
    animation: changeColor 2s ease forwards;
  }

Hier:

• Das Element bleibt nach Abschluss der Animation blau, anstatt wieder rot zu werden.

7. Mehrere Animationen

Sie können mehrere Animationen auf ein Element anwenden, indem Sie sie durch Kommas trennen.

• Beispiel: Animieren von Farbe und Position.

  @keyframes moveBox {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(100px);
    }
  }

  .box {
    animation: changeColor 2s ease, moveBox 2s ease-in-out;
  }

In diesem Fall:

• Die .box ändert ihre Farbe und verschiebt sich gleichzeitig um 100 Pixel nach rechts.

8. Browserunterstützung und vorangestellte Eigenschaften

Während moderne Browser CSS-Animationen unterstützen, ist es immer eine gute Idee, Herstellerpräfixe für ältere Browserversionen hinzuzufügen.

• Example: Adding vendor prefixes.

  .box {
    -webkit-animation: changeColor 2s ease;
    -moz-animation: changeColor 2s ease;
    animation: changeColor 2s ease;
  }

This ensures compatibility across different browsers.

Practice Exercise

1. Create a bouncing ball animation using @keyframes that makes the ball move up and down smoothly.
2. Add an animation to an image that rotates it 360 degrees on hover.

Next Up: In the next lecture, we’ll explore CSS Transitions, which allow you to animate changes in CSS properties smoothly. You’ll learn how to create engaging hover effects and other interactions that enhance user experience.

follow me on LinkedIn

Ridoy Hasan

Das obige ist der detaillierte Inhalt vonCSS-Animationen – Elemente zum Leben erwecken. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!