transition-property

Übersicht

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

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

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

Browser Kompatibilität

Siehe auch

• CSS Animationen nutzen
• TransitionEvent