Animationseigenschaften

7.1 Eigenschaft animation-name

CSS-Animationen ermöglichen es, dynamische und fließende visuelle Effekte zu erstellen, die die Benutzeroberfläche verbessern und interaktiver machen. Animationseigenschaften erlauben die Kontrolle über verschiedene Aspekte der Animation, wie Name, Dauer, Timing-Funktion und Verzögerung. Jetzt schauen wir uns diese Eigenschaften genauer an und zeigen, wie man sie benutzt.

Die Eigenschaft animation-name legt den Namen der Animation fest, die auf das Element angewendet wird. Der Name muss dem Namen entsprechen, der in der @keyframes-Regel angegeben ist.

Syntax:

    
      element {
        animation-name: animation-name;
      }
    
  

Wo:

• animation-name: der in @keyframes definierte Animationsname

Beispiel:

    
      @keyframes moveRight {
        from {
          transform: translateX(0);
        }

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

      .box {
        animation-name: moveRight;
      }
    
  

Code-Erklärung:

• @keyframes moveRight: definiert eine Animation mit dem Namen moveRight, die das Element nach rechts bewegt
• .box: Element, auf das die Animation moveRight angewendet wird

7.2 Eigenschaft animation-duration

Die Eigenschaft animation-duration legt die Dauer der Animation fest. Der Wert wird in Sekunden (s) oder Millisekunden (ms) angegeben.

Syntax:

    
      element {
        animation-duration: time;
      }
    
  

Wo:

• time: die Dauer der Animation (z. B. 2s für zwei Sekunden oder 500ms für 500 Millisekunden).

Beispiel:

    
      @keyframes moveRight {
        from {
          transform: translateX(0);
        }

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

      .box {
        animation-name: moveRight;
        animation-duration: 2s;
      }
    
  

Code-Erklärung:

• animation-duration: 2s: setzt die Dauer der Animation moveRight auf 2 Sekunden

7.3 Eigenschaft animation-timing-function

Die Eigenschaft animation-timing-function bestimmt die Geschwindigkeitskurve der Animation. Sie ermöglicht verschiedene Animationseffekte wie Beschleunigung, Verzögerung usw.

Syntax:

    
      element {
        animation-timing-function: function;
      }
    
  

Wo:

• function: die Timing-Funktion, die die Geschwindigkeitskurve der Animation definiert (z. B. ease, linear, ease-in, ease-out, ease-in-out)

Beispiel:

    
      @keyframes moveRight {
        from {
          transform: translateX(0);
        }

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

      .box {
        animation-name: moveRight;
        animation-duration: 2s;
        animation-timing-function: ease-in-out;
      }
    
  

Code-Erklärung:

• animation-timing-function: ease-in-out: setzt die Timing-Funktion für die Animation moveRight, sodass die Animation sanft mit langsamem Anfang und Ende sowie Beschleunigung in der Mitte verläuft

Haupt-Timing-Funktionen:

• ease: die Animation beginnt langsam, beschleunigt zur Mitte hin und verlangsamt zum Ende
• linear: die Animation verläuft mit gleichmäßiger Geschwindigkeit von Anfang bis Ende
• ease-in: die Animation beginnt langsam und beschleunigt dann
• ease-out: die Animation beginnt schnell und verlangsamt dann
• ease-in-out: die Animation beginnt und endet langsam, beschleunigt in der Mitte

7.4 Eigenschaft animation-delay

Die Eigenschaft animation-delay legt die Verzögerung vor Beginn der Animation fest. Der Wert wird in Sekunden (s) oder Millisekunden (ms) angegeben.

Syntax:

    
      element {
        animation-delay: time;
      }
    
  

Wo:

• time: die Verzögerung vor Beginn der Animation (z. B. 1s für eine Sekunde oder 500ms für 500 Millisekunden)

Beispiel:

    
      @keyframes moveRight {
        from {
          transform: translateX(0);
        }

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

      .box {
        animation-name: moveRight;
        animation-duration: 2s;
        animation-timing-function: ease-in-out;
        animation-delay: 1s;
      }
    
  

Code-Erklärung:

• animation-delay: 1s: setzt die Verzögerung vor Beginn der Animation moveRight auf 1 Sekunde