Die transition-propertyEigenschaft, die normalerweise als Teil der transitionKurzform verwendet wird, wird verwendet, um zu definieren, auf welche Eigenschaft oder Eigenschaften Sie einen Übergangseffekt anwenden möchten.
Dazu geben Sie den Namen der Eigenschaft als Wert an:
.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 Langschrift) zum Übergang mehrerer Eigenschaften zu einem einzelnen Element
- Das Schlüsselwort
none, das angibt, dass keine Eigenschaft übergeht - Das Schlüsselwort
all, das angibt, dass alle Eigenschaften übergehen (Standardeinstellung).
Wenn die Werte Komma trennt, werden die Eigenschaftsnamen im wesentlichen zu den anderen Übergangseigenschaften abgebildet definiert ( transition-timing-function, transition-duration, und transition-delay). Das heißt, wenn eine durch Kommas getrennte Liste von Eigenschaften einen oder mehrere ungültige Eigenschaftsnamen enthält, werden die anderen Eigenschaften weiterhin übergehen und den beabsichtigten zugehörigen Übergangseigenschaften zugeordnet.
Die Spezifikation beschreibt dies mit den Worten:
"(U) nicht erkannte oder nicht animierbare Eigenschaften müssen in der Liste enthalten sein, um die Übereinstimmung der Indizes zu gewährleisten."
Wenn Sie einen Wert von noneoder die universellen Schlüsselwörter inheritoder verwenden initial, können diese Werte nicht als Teil einer durch Kommas getrennten Liste verwendet werden. Andernfalls führt dies zu einem Syntaxfehler und die gesamte Zeile wird ignoriert.
Für die Kompatibilität in allen unterstützenden Browsern sind Herstellerpräfixe erforderlich, wobei die Standardsyntax 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 unterstützt wird transition-property) benötigt kein -ms-Präfix.
Browser-Unterstützung
| Chrom | Safari | Feuerfuchs | Oper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Funktioniert | Funktioniert | 4+ | 10,5+ | 10+ | 2.1+ | 3.2+ |