Übergänge

4.1 Transition-Eigenschaft

CSS-Transitionen ermöglichen es, Änderungen der CSS-Eigenschaftswerte zu animieren und schaffen sanfte Übergänge zwischen ihrem ursprünglichen und Endzustand. Das ist ein mächtiges Tool, das die Benutzerfreundlichkeit verbessert, indem es Dynamik zu Webseiten hinzufügt. Lass uns die grundlegenden Aspekte der Übergänge anschauen, einschließlich der Eigenschaften, Dauer und Timing-Funktionen.

Die Eigenschaft transition fasst alle Aspekte eines Übergangs in einer Eigenschaft zusammen. Sie kann beinhalten:

1. Eigenschaften, die animiert werden sollen.
2. Die Dauer der Animation.
3. Die Timing-Funktion.
4. Eine Verzögerung vor dem Start der Animation (optional).

Syntax:

    
      element {
        transition: property duration timing-function delay;
      }
    
  

Wo:

• property: die Eigenschaft, auf die der Übergang angewendet wird (z. B. width, height, background-color)
• duration: die Dauer des Übergangs (z. B. 2s für zwei Sekunden oder 500ms für 500 Millisekunden)
• timing-function: die Timing-Funktion, die die Geschwindigkeitsänderung der Animation bestimmt (z. B. ease, linear, ease-in, ease-out, ease-in-out)
• delay: die Verzögerung vor dem Start des Übergangs (z. B. 1s für eine Sekunde)

Beispiel:

    
      
Inhalt
    
  

    
      .box {
        width: 100px;
        height: 100px;
        background-color: #3498db;
        transition: width 2s ease-in-out, background-color 1s ease;
      }
    
  

Erklärung des Codes:

• transition: width 2s ease-in-out, background-color 1s ease: definiert zwei Übergänge: einen für die Eigenschaft width mit einer Dauer von 2 Sekunden und einer Timing-Funktion ease-in-out, und einen anderen für die Eigenschaft background-color mit einer Dauer von 1 Sekunde und einer Timing-Funktion ease

4.2 Übergangseigenschaften

1. Eigenschaft transition-property

Die Eigenschaft transition-property legt fest, auf welche Eigenschaften des Elements Übergänge angewendet werden.

Syntax:

    
      element {
        transition-property: property1, property2 ...;
      }
    
  

Beispiel:

    
      .box {
        transition-property: width, height, background-color;
      }
    
  

2. Eigenschaft transition-duration

Die Eigenschaft transition-duration gibt die Dauer des Übergangs an.

Syntax:

    
      element {
        transition-duration: time;
      }
    
  

Beispiel:

    
      .box {
        transition-duration: 2s, 1s, 3s;
      }
    
  

3. Eigenschaft transition-timing-function

Die Eigenschaft transition-timing-function bestimmt die Geschwindigkeit der Änderung der Animation im Laufe der Zeit.

Syntax:

    
      element {
        transition-timing-function: function;
      }
    
  

Beispiel:

    
      .box {
        transition-timing-function: ease-in, linear, ease-out;
      }
    
  

4. Eigenschaft transition-delay

Die Eigenschaft transition-delay legt die Verzögerung vor dem Start des Übergangs fest.

Syntax:

    
      element {
        transition-delay: time;
      }
    
  

Beispiel:

    
      .box {
        transition-delay: 1s, 0s, 500ms;
      }
    
  

4.3 Dauer der Übergänge

Die Dauer eines Übergangs gibt an, wie lange die Animation der Änderung der Eigenschaft dauert. Sie wird in Sekunden (s) oder Millisekunden (ms) angegeben.

Beispiel:

    
      .box {
        width: 100px;
        height: 100px;
        background-color: #3498db;
        transition: width 2s, height 1s, background-color 500ms;
      }
    
  

Erklärung des Codes:

• transition: width 2s, height 1s, background-color 500ms: definiert, dass der Übergang für die Eigenschaft width 2 Sekunden dauert, für height — 1 Sekunde, und für background-color — 500 Millisekunden.

4.4 Timing-Funktionen

Timing-Funktionen bestimmen, wie sich der Wert einer Eigenschaft im Laufe der Zeit ändert. Sie ermöglichen es, verschiedene Animationseffekte zu erstellen.

Grundlegende Timing-Funktionen:

• ease: Animation beginnt langsam, beschleunigt sich zur Mitte und verlangsamt sich am Ende
• linear: Animation erfolgt mit konstanter Geschwindigkeit von Anfang bis Ende
• ease-in: Animation beginnt langsam und beschleunigt sich dann
• ease-out: Animation beginnt schnell und verlangsamt sich dann
• ease-in-out: Animation beginnt und endet langsam, beschleunigt sich in der Mitte

Beispiel:

    
      .box {
        width: 100px;
        height: 100px;
        background-color: #2ecc71;
        transition: width 2s ease-in-out, height 1s linear, background-color 500ms ease;
      }
    
  

Erklärung des Codes:

• ease-in-out: sanfter Übergang, der langsam beginnt und endet
• linear: Übergang mit konstanter Geschwindigkeit
• ease: Übergang mit langsamen Anfang und Ende, beschleunigt sich zur Mitte