transition-property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Die transition-property CSS Eigenschaft legt fest, auf welche CSS-Eigenschaften ein Übergangseffekt angewendet werden soll.

Probieren Sie es aus

transition-property: margin-right;

transition-property: margin-right, color;

transition-property: all;

transition-property: none;

<section id="default-example"> <div id="example-element">Hover to see<br />the transition.</div> </section>

#example-element { background-color: #e4f0f5; color: #000; padding: 1rem; border-radius: 0.5rem; font: 1em monospace; width: 100%; transition: margin-right 2s; } #default-example:hover > #example-element { background-color: #909; color: #fff; margin-right: 40%; }

Wenn Sie eine Kurzschreibweise angeben (z.B. background), werden alle Untereigenschaften in Langform, die animiert werden können, ebenfalls animiert.

Syntax

css

/* Keyword values */ transition-property: none; transition-property: all; /* <custom-ident> values */ transition-property: test_05; transition-property: -specific; transition-property: sliding-vertically; /* Multiple values */ transition-property: test1, animation4; transition-property: all, height, color; transition-property: all, -moz-specific, sliding; /* Global values */ transition-property: inherit; transition-property: initial; transition-property: revert; transition-property: revert-layer; transition-property: unset;

Werte

none: Es werden keine Eigenschaften überführt.
all: Alle Eigenschaften, die überführt werden können, werden überführt.
<custom-ident>: Ein String, der die Eigenschaft identifiziert, auf die ein Übergangseffekt angewendet werden soll, wenn sich ihr Wert ändert.

Formale Definition

Anfangswert	alle
Anwendbar auf	alle Elemente, `::before` und `::after` Pseudoelemente
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	Not animatable

Formale Syntax

transition-property = 
 none |
 <single-transition-property># 

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

Beispiele

Einfaches Beispiel

Wenn der Button fokussiert oder überfahren wird, durchläuft er eine einsekündige Farbüberblendung; die transition-property ist background-color.

HTML

html

<button class="target">Focus me!</button>

CSS

html { height: 100vh; } button { font-size: 1.4rem; padding: 10px 20px; border: 1px solid #ccc; border-radius: 10px; outline: none; }

css

.target { transition-property: background-color; transition-duration: 1s; background-color: #ccc; } .target:hover, .target:focus { background-color: #eee; }

Siehe unseren Leitfaden zur Verwendung von CSS-Übergängen für weitere Beispiele zur transition-property.

Spezifikationen

Specification
CSS Transitions # transition-property-property