Eigenschaft transition-duration
Die Eigenschaft transition-duration legt
die Dauer eines reibungslosen Übergangs transition fest.
Syntax
Selektor {
transition-duration: Zeit in s oder ms;
}
Werte
| Wert | Beschreibung |
|---|---|
s |
Gibt die Zeit in Sekunden an (z.B. 3s).
Dezimalwerte sind möglich,
z.B. 0.5s - eine halbe Sekunde.
|
ms |
Gibt die Zeit in Millisekunden an (z.B. 3ms).
Eine Sekunde entspricht 1000 Millisekunden.
|
Standardwert: 0s.
Beispiel
Bewegen Sie die Maus über den Block - er ändert seine
Breite sanft über 2 Sekunden.
<div id="elem"></div>
#elem {
transition-duration: 2s;
transition-property: width;
border: 1px solid black;
height: 50px;
width: 100px;
}
#elem:hover {
width: 400px;
}
:
Siehe auch
-
die Eigenschaft
transition-property,
die den Namen der Eigenschaft für den Übergang angibt -
die Eigenschaft
transition-delay,
die die Verzögerung vor dem Übergang angibt -
die Eigenschaft
transition-timing-function,
die die Timing-Funktion für den Übergang angibt -
die Eigenschaft
transition,
die die Kurzschreibweise für Übergänge ist -
die Eigenschaft
animation,
mit der Animationen erstellt werden können
