Thanks to visit codestin.com
Credit goes to developer.mozilla.org

Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

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: black;
  padding: 1rem;
  border-radius: 0.5rem;
  font: 1em monospace;
  width: 100%;
  transition: margin-right 2s;
}

#default-example:hover > #example-element {
  background-color: #990099;
  color: white;
  margin-right: 40%;
}

Wenn Sie eine Kurzform-Eigenschaft angeben (z. B. background), werden alle ihre Langform-Untereigenschaften, die animiert werden können, ebenfalls einbezogen.

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

Keine Eigenschaften werden übergehen.

all

Alle Eigenschaften, die übergehen können, werden es tun.

<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>
Diese Syntax spiegelt den neuesten Standard gemäß CSS Transitions wider. Möglicherweise haben nicht alle Browser jeden Teil implementiert. Siehe Browserkompatibilität für Informationen zur Unterstützung.

Beispiele

Einfaches Beispiel

Wenn der Button fokussiert oder darübergefahren wird, durchläuft er einen einsekündigen Farbwechsel-Übergang; 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: #cccccc;
}

.target:hover,
.target:focus {
  background-color: #eeeeee;
}

Sehen Sie sich unseren Leitfaden zur Verwendung von CSS-Übergängen an für weitere Beispiele zu transition-property.

Spezifikationen

Specification
CSS Transitions
# transition-property-property

Browser-Kompatibilität

Siehe auch