Was Ist Eine Transition?

Manchmal müssen wir Animationen für Änderungen von Elementen auf einer Webseite erstellen, wobei Faktoren wie Geschwindigkeit, Verzögerungszeit und Dauer kontrolliert werden. In solchen Fällen kann die transition-Eigenschaft verwendet werden, um diese Aufgabe zu erfüllen.

Das Element hat immer zwei Zustände: initial und final. Wir können das Änderungsverhalten des Elements mit Hilfe der folgenden Eigenschaften steuern:

• transition-property - Der Name der CSS-Eigenschaft, die wir animieren müssen;
• transition-duration - Die Zeit, während der wir den Zustand des Elements ändern müssen. Sie wird in Sekunden (s) oder Millisekunden (ms) angegeben;
• transition-timing-function - Sie 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.

Wir werden jede Eigenschaft im weiteren Verlauf dieses Kurses betrachten.

Hinweis

1 Sekunde = 1000 Millisekunden. Also:

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

Übung

Zum Beispiel möchten wir einen transition-Effekt zur Hintergrundfarbe des div-Elements hinzufügen, wenn es überfahren wird. Unsere Aufgabe ist:

• Die background-color-Eigenschaft zu ändern;
• Die Verzögerung muss 0.1 Sekunden betragen;
• Die Änderung der Farbe muss 0.3 Sekunden dauern;
• Für die timing-function erwarten wir den Wert ease-in-out, was bedeutet, dass es langsam beginnt, in der Mitte beschleunigt und dann am Ende wieder langsamer wird.

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

Wir haben alle Übergangseigenschaften für das div-Element festgelegt und dann für das hover nur die Dekoration, die wir sehen möchten.