Manchmal ist es erforderlich, Animationen für Änderungen von Elementen auf einer Webseite zu erstellen und dabei Faktoren wie Geschwindigkeit, Verzögerungszeit und Dauer zu steuern. In solchen Fällen kann die Eigenschaft transition verwendet werden, um diese Aufgabe zu erfüllen.

Ein Element besitzt immer zwei Zustände: initial und final. Das Änderungsverhalten des Elements kann mit Hilfe der folgenden Eigenschaften gesteuert werden:

transition-property: 
transition-duration:  
transition-timing-function: 
transition-delay: 

• transition-property – Der Name der CSS-Eigenschaft, die animiert werden soll;
• transition-duration – Die Zeitspanne, in der der Zustand des Elements geändert werden soll. Sie wird in Sekunden (s) oder Millisekunden (ms) angegeben;
• transition-timing-function – Gibt die Geschwindigkeitskurve des Übergangseffekts an. Typische Werte sind ease, linear, ease-in, ease-out und ease-in-out;
• transition-delay – Die Zeitverzögerung, bevor der Übergangseffekt beginnt. Sie wird in Sekunden (s) oder Millisekunden (ms) angegeben.

Jede dieser Eigenschaften wird im weiteren Verlauf dieses Kurses behandelt.

Hinweis

1 Sekunde = 1000 Millisekunden. Also:

• 0.1s = 100ms;
• 2.5s = 2500ms;
• 0.5s = 500ms.

Übung

Beispiel: Es soll ein transition-Effekt für die Hintergrundfarbe des div-Elements hinzugefügt werden, wenn dieses mit der Maus überfahren wird. Die Anforderungen sind:

• Änderung der Eigenschaft background-color;
• Die Verzögerung beträgt 0.1 Sekunden;
• Die Farbänderung dauert 0.3 Sekunden;
• Für die timing-function wird der Wert ease-in-out erwartet, was bedeutet, dass der Effekt langsam beginnt, in der Mitte schneller wird und am Ende wieder langsamer abläuft.

Fahre mit dem Cursor über das Element, um das Ergebnis zu sehen.

Wir haben alle Übergangseigenschaften auf das div-Element angewendet und anschließend beim hover nur die Dekoration festgelegt, die sichtbar sein soll.