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

Anfangswertalle
Anwendbar aufalle Elemente, ::before und ::after Pseudoelemente
VererbtNein
Berechneter Wertwie angegeben
AnimationstypNot 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

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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch