CSS3 transition-propertyEigenschaft

Browser-Unterstützung

Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft unterstützt.

Zahlen direkt vor -webkit-, -ms- oder -moz- beziehen sich auf die erste Browserversion, die die mit Präfix versehene Eigenschaft unterstützt.

Eigenschaftsdefinition und Verwendungshinweise

transition-property ist eine Eigenschaft in CSS3, mit der angegeben wird, auf welche CSS-Eigenschaften der Übergangseffekt angewendet wird. Sie ermöglicht es Ihnen, die Eigenschaften, für die ein Übergang erfolgen soll, ausdrücklich anzugeben, sodass beim Ändern des Zustands eines Elements nur für die angegebenen Eigenschaften ein Übergang erfolgt und nicht für alle Eigenschaften.

Der Wert dieser Eigenschaft kann ein CSS-Eigenschaftsname oder das Schlüsselwort all sein, was bedeutet, dass der Übergangseffekt auf alle Eigenschaften angewendet wird.

Wenn Sie beispielsweise einen Übergangseffekt nur bei einer Farbänderung anwenden möchten, können Sie schreiben:

.element {
  transition-property: color;
}

Auf diese Weise tritt ein Übergangseffekt auf, wenn sich die Farbe des Elements .element ändert.

Wenn Sie den Übergangseffekt auf alle Eigenschaften anwenden möchten, können Sie das Schlüsselwort all verwenden:

.element {
  transition-property: all;
}

Auf diese Weise tritt ein Übergangseffekt auf, egal welche Eigenschaft sich ändert.

Sie können auch mehrere Eigenschaften gleichzeitig angeben, getrennt durch Kommas:

.element {
  transition-property: width, height, opacity;
}

Auf diese Weise tritt ein Übergangseffekt auf, wenn sich die Breite, Höhe oder Deckkraft des Elements .element ändert.

Syntax

Weitere Beispiele

Bewegen Sie den Mauszeiger über ein div-Element, um Breite und Höhe mit einem sanften Übergangseffekt zu ändern.