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

cssSelektor {
  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:

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  transition: width 2s ease 3s;
  width: 100px;
  height: 50px;
}
#elem:hover {
  width: 400px;
}

Результат:

Siehe auch