Kursinhalt
Fortgeschrittene CSS-Techniken
Fortgeschrittene CSS-Techniken
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 sindease
,linear
,ease-in
,ease-out
undease-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.1
s =100
ms;2.5
s =2500
ms;0.5
s =500
ms.
Ü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 Wertease-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.
index.html
index.css
Wir haben alle Übergangseigenschaften für das div
-Element festgelegt und dann für das hover
nur die Dekoration, die wir sehen möchten.
Danke für Ihr Feedback!