CodeGym/Kurse/Frontend SELF DE/Animationszyklen

Animationszyklen

Verfügbar

8.1 Das Eigenschaft animation-iteration-count

CSS-Animationen ermöglichen dynamische visuelle Effekte, die die Benutzeroberfläche verbessern. Jetzt schauen wir uns zwei wichtige Eigenschaften an, die die Animationszyklen steuern: animation-iteration-count und animation-direction.

Die Eigenschaft animation-iteration-count legt fest, wie oft eine Animation wiederholt wird. Diese Eigenschaft ermöglicht es zu steuern, ob eine Animation einmal, mehrmals oder unendlich oft abgespielt wird.

Syntax:

element {
  animation-iteration-count: number | infinite;
}

Wo:

  • number: Anzahl der Wiedergaben der Animation (z.B. 1, 2, 3, etc.)
  • infinite: die Animation wird unendlich oft wiederholt

Beispiel:

HTML
<div class="box"></div>
CSS
@keyframes bounce {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-30px);
  }

  100% {
    transform: translateY(0);
  }
}

.box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  animation-name: bounce;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

Erklärung des Codes:

  • @keyframes bounce: definiert eine Animation, die das Element nach oben hebt und dann in die Ausgangsposition zurückbringt
  • animation-iteration-count: infinite: stellt eine unendliche Wiederholung der Animation ein

8.2 Das Eigenschaft animation-direction

Die Eigenschaft animation-direction bestimmt die Abspielrichtung der Animation. Sie erlaubt es anzugeben, ob die Animation in Vorwärtsrichtung, Rückwärtsrichtung oder abwechselnd in beiden Richtungen abgespielt wird.

Syntax:

element {
  animation-direction: normal | reverse | alternate | alternate-reverse;
}

Wo:

  • normal: die Animation wird in Vorwärtsrichtung abgespielt (Standard)
  • reverse: die Animation wird in Rückwärtsrichtung abgespielt
  • alternate: die Animation wechselt zwischen Vorwärts- und Rückwärtsrichtung
  • alternate-reverse: die Animation beginnt in Rückwärtsrichtung und wechselt dann zwischen Rückwärts- und Vorwärtsrichtung

Beispiel

Vorwärts- und Rückwärtswiedergabe:

HTML
<div class="box1"></div>
<div class="box2"></div>
CSS
@keyframes moveRight {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(100px);
  }
}

.box1, .box2 {
  width: 100px;
  height: 100px;
  background-color: #2ecc71;
  animation-name: moveRight;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

.box1 {
  animation-direction: normal;
}

.box2 {
  animation-direction: reverse;
}

Erklärung des Codes:

  • .box1: die Animation wird in Vorwärtsrichtung abgespielt
  • .box2: die Animation wird in Rückwärtsrichtung abgespielt

Wechselnde Richtungen:

HTML
<div class="box1"></div>
<div class="box2"></div>
CSS
@keyframes moveRight {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(100px);
  }
}

.box1, .box2 {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  animation-name: moveRight;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

.box1 {
  animation-direction: alternate;
}

.box2 {
  animation-direction: alternate-reverse;
}

Erklärung des Codes:

  • .box1: die Animation wechselt zwischen Vorwärts- und Rückwärtsrichtung
  • .box2: die Animation beginnt in Rückwärtsrichtung und wechselt dann zwischen Rückwärts- und Vorwärtsrichtung

8.3 Beispiel für die Verwendung beider Eigenschaften

Schwingendes Element

  • Dieses Beispiel zeigt ein schwingendes Element, das sich nach rechts und links bewegt:
HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Schwingendes Element</title>
    <style>
      @keyframes swing {
        0% {
          transform: rotate(0deg);
        }

        50% {
          transform: rotate(10deg);
        }

        100% {
          transform: rotate(0deg);
        }
      }

      .box {
        width: 100px;
        height: 100px;
        background-color: #e74c3c;
        animation: swing 1s infinite alternate-reverse;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

Erklärung des Codes:

  • @keyframes swing: definiert eine Animation, die das Element dreht
  • .box: Element mit der angewendeten swing-Animation, mit einer Dauer von 1 Sekunde, unendlicher Wiedergabe und Start in Rückwärtsrichtung
1
Aufgabe
Frontend SELF DE,  Level 24Lektion 2
Gesperrt
Wechselnde Richtungen
Wechselnde Richtungen
1
Aufgabe
Frontend SELF DE,  Level 24Lektion 2
Gesperrt
Volle Kombination
Volle Kombination
Kommentare
  • Beliebt
  • Neu
  • Alt
Du musst angemeldet sein, um einen Kommentar schreiben zu können
Auf dieser Seite gibt es noch keine Kommentare