Dies ist eine experimentelle Technologie
Da diese Technologie noch nicht definitiv implementiert wurde, sollte die Browserkompatibilität beachtet werden. Es ist auch möglich, dass der Syntax in einer späteren Spezifikation noch geändert wird.

Übersicht

Die CSS Eigenschaft transition-property wird verwendet, um den Übergangseffekte auf bestimmte CSS Eigenschaften anzuwenden.

Hinweis: Die Eigenschaften, die animiert werden können, könnten sich unter Umständen ändern. Eigenschaften, die bis jetzt noch nicht animierbar sind, sollten nicht angegeben werden, da sie vielleicht eines Tages animierbar sein werden, und es dann unerwartete Auswirkungen haben könnte.

Wird eine Kurzform einer CSS Eigenschaft (zum Beispiel background) angegeben, so werden alle Untereigenschaften (zum Beispiel background-color), wenn diese animierbar sind, ebenfalls animiert.

Initialwertalle
Anwendbar aufalle Elemente, ::before und ::after Pseudoelemente
VererbtNein
Medienvisuell
Berechneter Wertwie angegeben
Animationstypdiskret
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik

Syntax

/* Schlüsselwortwerte */
transition-property: none;
transition-property: all;
transition-property: test_05;
transition-property: -specific;
transition-property: sliding-vertically;

transition-property: test1;
transition-property: test1, animation4;
transition-property: all, height, all;
transition-property: all, -moz-specific, sliding;

/* Globale Werte */
transition-property: inherit;
transition-property: initial;
transition-property: unset;

Werte

none
Keine Eigenschaften werden animiert.
all
An allen animierbaren Eigenschaften werden Übergangsanimationen angewant.
IDENT
Zeichenkette, die eine Eigenschaft bezeichnet, an der bei einer Änderung des Wertes der jeweiligen Eigenschaft, eine Übergangsanimation angewant werden soll. Die Groß- und Kleinschreibung des Eingenschaftsnamen wird ignoriert. Ein Eigenschaftsname darf nur alphabetische (a bis z) und numerische (0 bis 9) Zeichen, sowie Unter- (_) und Bindestriche(-) erhalten. Das erste Zeichen, das kein Bindestrich ist, muss ein alphabetisches Zeichen sein (Es darf keine Zahl am Anfang stehen, auch wenn kein Bindestrich vorangestellt wurde). Der Eigenschaftsname darf ebenfalls nicht mit zwei Bindestrichen beginnen.

Formale Syntax

none | <single-transition-property>#

wobei
<single-transition-property> = all | <custom-ident>

Beispiele

Es gibt mehrere Beispiele von CSS Übergängen im CSS Animationen Hauptartikel.

Spezifikationen

Spezifikation Status Komentar
CSS Transitions
Die Definition von 'transition-property' in dieser Spezifikation.
Arbeitsentwurf Initiale definition

Browser Kompatibilität

Wir konvertieren die Kompatibilitätsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilitätstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst!

Merkmal Chrome Firefox (Gecko) Internet Explorer Opera Safari
Grundlegende Unterstützung (Ja) -webkit 4.0 (2.0) -moz
16.0 (16.0)
10 11.6-o
12.10 #
(Ja) -webkit
Merkmal Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Grundlegende Unterstützung (Ja) -webkit (Ja) -webkit 4.0 (2.0) -moz
16.0 (16.0)
? ? (Ja) -webkit

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: Sebastianz, felhe, StephenJB
Zuletzt aktualisiert von: Sebastianz,