transition-property

Die Eigenschaft transition-property, die normalerweise als Teil der Kurzschreibweise transition verwendet wird, dient dazu, zu definieren, für welche Eigenschaft oder Eigenschaften ein Übergangseffekt angewendet werden soll.

Dies geschieht durch Angabe des Namens der Eigenschaft als Wert

.example {
    transition-property: color;
}

Der Wert kann einer der folgenden sein

• Ein einzelner Eigenschaftsname, wie im obigen Beispiel
• Eine durch Kommas getrennte Liste von Eigenschaftsnamen (Kurz- oder Langform), um mehrere Eigenschaften eines einzelnen Elements zu überblenden
• Das Schlüsselwort none, das angibt, dass keine Eigenschaft überblendet wird
• Das Schlüsselwort all, das angibt, dass alle Eigenschaften überblendet werden (Standard)

Beim Komma-Trennen der Werte werden die Eigenschaftsnamen im Wesentlichen den anderen definierten Übergangseigenschaften zugeordnet (transition-timing-function, transition-duration und transition-delay). Das bedeutet, wenn eine durch Kommas getrennte Liste von Eigenschaften einen oder mehrere ungültige Eigenschaftsnamen enthält, werden die anderen Eigenschaften weiterhin überblendet und den beabsichtigten zugehörigen Übergangseigenschaften zugeordnet.

Die Spezifikation beschreibt dies wie folgt:

„Nicht erkannte oder nicht animierbare Eigenschaften müssen in der Liste beibehalten werden, um die Übereinstimmung der Indizes zu erhalten.“

Bei Verwendung der Werte none oder der universellen Schlüsselwörter inherit oder initial können diese Werte nicht als Teil einer durch Kommas getrennten Liste verwendet werden, da dies sonst zu einem Syntaxfehler führt und die gesamte Zeile ignoriert wird.

Für die Kompatibilität in allen unterstützenden Browsern sind Vendor-Präfixe erforderlich, wobei die Standard-Syntax zuletzt deklariert wird

.example {
    -webkit-transition-property: color;
    -moz-transition-property: color;
    -o-transition-property: color;
    transition-property: color;
}

IE10 (die erste stabile Version von IE, die transition-property unterstützte) benötigt kein -ms- Präfix.

Verwandte Eigenschaften

• transition
• transition-delay
• transition-timing-function
• transition-duration

Weitere Ressourcen

• transition-property auf W3C
• transition-property auf MDN

Browser-Unterstützung

Chrome	Safari	Firefox	Opera	IE	Android	iOS
Funktioniert	Funktioniert	4+	10.5+	10+	2.1+	3.2+