Eigenschaft transition
Die Eigenschaft transition ist eine Kurzschreibweise für
sanfte Übergänge und ermöglicht es,
gleichzeitig transition-duration,
transition-property,
transition-timing-function
und transition-delay festzulegen.
Syntax
Selektor {
transition: Wert;
}
Die Reihenfolge der Eigenschaften spielt keine Rolle, jedoch
muss die Ausführungszeit (transition-duration)
vor der Verzögerung (transition-delay) stehen.
Werte
Siehe entsprechende Eigenschaften. Standardwert:
all 0s ease 0s.
Der Wert none hebt alle Übergänge auf
(sie erfolgen sofort).
Beispiel
Bewegen Sie die Maus über den Block - 3 Sekunden
lang wird nichts passieren (es gibt eine Verzögerung von
3s), dann ändert er seine Breite sanft
in 2 Sekunden. Wenn Sie die Maus dann wegnehmen -
passiert wieder 3 Sekunden lang nichts,
danach verringert sich die Breite sanft
auf den Ausgangswert:
<div id="elem"></div>
#elem {
border: 1px solid black;
transition: width 2s ease 3s;
width: 100px;
height: 50px;
}
#elem:hover {
width: 400px;
}
:
Siehe auch
-
die Eigenschaft
animation,
mit der eine Animation erstellt werden kann
