transition

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.

* Some parts of this feature may have varying levels of support.

Probieren Sie es aus

Mit Übergängen können Sie den Übergang zwischen zwei Zuständen eines Elements definieren. Unterschiedliche Zustände können mithilfe von Pseudoklassen wie :hover oder :active definiert oder dynamisch mit JavaScript gesetzt werden.

Bestandteileigenschaften

Diese Eigenschaft ist eine Kurznotation für die folgenden CSS-Eigenschaften:

Syntax

css
/* Apply to 1 property */
/* property name | duration */
transition: margin-right 4s;

/* property name | duration | delay */
transition: margin-right 4s 1s;

/* property name | duration | easing function */
transition: margin-right 4s ease-in-out;

/* property name | duration | easing function | delay */
transition: margin-right 4s ease-in-out 1s;

/* property name | duration | behavior */
transition: display 4s allow-discrete;

/* Apply to 2 properties */
transition:
  margin-right 4s,
  color 1s;

/* Apply to all changed properties */
transition: all 0.5s ease-out allow-discrete;
transition: 200ms linear 50ms;

/* Global values */
transition: inherit;
transition: initial;
transition: revert;
transition: revert-layer;
transition: unset;

Der Wert der transition-Eigenschaft wird als einer der folgenden angegeben:

  • Der spezielle Wert none, der angibt, dass bei diesem Element keine Übergänge stattfinden. Dies ist der Standardwert.
  • Eine oder mehrere Einzel-Eigenschaftsübergänge, getrennt durch Kommas.

Jeder Einzel-Eigenschaftsübergang beschreibt den Übergang, der auf eine einzelne Eigenschaft oder alle Eigenschaften angewendet werden soll. Er beinhaltet:

  • null oder einen Wert, der die Eigenschaft(en) angibt, auf die der Übergang angewendet werden soll. Dies kann gesetzt werden als:
    • Ein <custom-ident>, das eine einzelne Eigenschaft repräsentiert.
    • Der spezielle Wert all, welcher angibt, dass der Übergang auf alle Eigenschaften angewendet wird, die sich ändern, wenn das Element seinen Zustand ändert.
    • Kein Wert, in welchem Fall der Wert all angenommen wird, und der angegebene Übergang wird weiterhin auf alle sich ändernden Eigenschaften angewendet.
  • null oder einen <easing-function>-Wert, der die zu verwendende Beschleunigungsfunktion repräsentiert
  • null, einen oder zwei <time>-Werte. Der erste, der als Zeitwert analysiert werden kann, wird transition-duration zugewiesen, und der zweite wird transition-delay zugewiesen.
  • null oder einen Wert, der angibt, ob Übergänge für Eigenschaften mit einem diskreten Animationsverhalten gestartet werden sollen. Der Wert ist, falls vorhanden, entweder das Schlüsselwort allow-discrete oder das Schlüsselwort normal.

Wenn Sie all als Übergangseigenschaft für einen Einzel-Eigenschaftsübergang angeben, dann aber nachfolgende Einzel-Eigenschaftsübergänge mit <custom-ident>-Werten spezifizieren, werden diese nachfolgenden Übergänge den ersten überschreiben. Zum Beispiel:

css
transition:
  all 200ms,
  opacity 400ms;

In diesem Fall werden alle Eigenschaften, die sich ändern, wenn das Element seinen Zustand ändert, mit einer Dauer von 200ms übergehen, außer opacity, das 400ms benötigt, um zu übergehen.

Siehe wie Dinge gehandhabt werden, wenn Listen von Eigenschaftswerten nicht dieselbe Länge haben. Kurz gesagt, zusätzliche Übergangsbeschreibungen, die über die Anzahl der tatsächlich animierten Eigenschaften hinausgehen, werden ignoriert.

Formale Definition

Anfangswertwie die jeweiligen Kurzschreibweisen:
Anwendbar aufalle Elemente, ::before und ::after Pseudoelemente
VererbtNein
Berechneter Wertwie die jeweiligen Kurzschreibweisen:
AnimationstypNot animatable

Formale Syntax

transition = 
<single-transition>#

<single-transition> =
[ none | <single-transition-property> ] ||
<time> ||
<easing-function> ||
<time>

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

<easing-function> =
<linear-easing-function> |
<cubic-bezier-easing-function> |
<step-easing-function>

<linear-easing-function> =
linear |
<linear()>

<cubic-bezier-easing-function> =
ease |
ease-in |
ease-out |
ease-in-out |
<cubic-bezier()>

<step-easing-function> =
step-start |
step-end |
<steps()>

<linear()> =
linear( [ <number> && <percentage>{0,2} ]# )

<cubic-bezier()> =
cubic-bezier( [ <number [0,1]> , <number> ]#{2} )

<steps()> =
steps( <integer> , <step-position>? )

<step-position> =
jump-start |
jump-end |
jump-none |
jump-both |
start |
end

Beispiele

Grundlegendes Beispiel

In diesem Beispiel gibt es, wenn der Benutzer über das Element fährt, eine Verzögerung von einer halben Sekunde (500ms), bevor ein zweisekündiger background-color Übergang erfolgt.

HTML

html
<a class="target">Hover over me</a>

CSS

Wir schließen zwei <time>-Werte ein. In der transition Kurznotation ist der erste <time> Wert die transition-duration. Der zweite Zeitwert ist die transition-delay. Beide haben den Standardwert 0s, wenn sie nicht angegeben werden.

css
.target {
  font-size: 2rem;
  background-color: palegoldenrod;
  transition: background-color 2s 500ms;
}

.target:hover {
  background-color: darkorange;
}

Spezifikationen

Specification
CSS Transitions
# transition-shorthand-property

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
transition
Gradients can be animated
transition-behavior value

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Siehe auch