Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

Die transition CSS Eigenschaft ist eine Kurzschreibweise für transition-property, transition-duration, transition-timing-function und transition-delay.

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

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

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

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

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

/* Apply to all changed properties */
transition: all 0.5s ease-out;

/* Global values */
transition: inherit;
transition: initial;
transition: unset;

Transitions ermöglicht die Definition von Übergängen zwischen zwei Zuständen eines Elementes. Verschiedene Zustände können mit der Pseudoklasse definiert werden, wie zum Beispiel :hover oder :active oder dynamisch durch JavaScript.

Initialwertwie die jeweiligen Kurzschreibweisen:
Anwendbar aufalle Elemente, ::before und ::after Pseudoelemente
VererbtNein
Medieninteraktiv
Berechneter Wertwie die jeweiligen Kurzschreibweisen:
Animationstypdiskret
Kanonische ReihenfolgeReihenfolge des Auftretens in der formalen Grammatik der Werte

Syntax

Die transition Eigenschaft wird durch eine einzelne Eigenschaft oder durch mehrere Eigenschaften von transitions ausgezeichnet. Mehrere Eigenschaften müssen durch Kommas getrennt werden.

Jede einzelne transition Eigenschaft beschreibt die transition, die auf eine einzelne Eigenschaft (oder die speziellen Werte all und none) angewandt werden soll. Das bezieht mit ein:

  • kein oder ein Wert repräsentiert die Eigenschaft, auf welche die transition angewandt werden soll. Diese Eigenschaft kann eine der folgenden sein:
    • das Schlüsselwort none
    • das Schlüsselwort all
    • ein <custom-ident>, das eine CSS Eigenschaft nennt.
  • kein oder ein <single-transition-timing-function> Wert, der die zu benutzende timing function definiert
  • kein, ein oder zwei <time> Werte. The first value that can be parsed as a time is assigned to the transition-duration, and the second value that can be parsed as a time is assigned to transition-delay.

See how things are handled when lists of property values aren't the same length. In short, extra transition descriptions beyond the number of properties actually being animated are ignored.

Formale Syntax

<single-transition>#

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

wobei
<single-transition-property> = all | <custom-ident>
<single-transition-timing-function> = <single-timing-function>

wobei
<single-timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function> | <frames-timing-function>

wobei
<cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)
<step-timing-function> = step-start | step-end | steps(<integer>[, [ start | end ] ]?)
<frames-timing-function> = frames(<integer>)

Beispiele

Es gibt viele weitere Beispiele über CSS transitions in dem Hauptartikel über CSS transitions.

Spezifikationen

Spezifikation Status Kommentar
CSS Transitions
Die Definition von 'transition' in dieser Spezifikation.
Arbeitsentwurf Ursprüngliche Definition

Browserkompatibilität

Merkmal Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Grundlegende Unterstützung 1.0 -webkit
26.0 #
(Ja)-webkit
(Ja)
4.0 (2.0) -moz
16.0 (16.0)[1]
10.0 10.1 -o
12.10 #
3.0 -webkit
6.1
Gradients[2] Nicht unterstützt (Ja) Nicht unterstützt 10.0 Nicht unterstützt Nicht unterstützt
frames() timing function Nicht unterstützt[3] ? Nicht unterstützt[3] Nicht unterstützt Nicht unterstützt[3] ?
Merkmal Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Grundlegende Unterstützung 2.1 -webkit (Ja)-webkit
(Ja)
4.0 (2.0) -moz
16.0 (16.0)[1]
10.0 10.0 -o
12.10 #
3.2 -webkit
Gradients[1] Nicht unterstützt (Ja) Nicht unterstützt 10.0 Nicht unterstützt Nicht unterstützt
frames() timing function ? ? Nicht unterstützt[3] Nicht unterstützt (Ja) ?

[1] In addition to the unprefixed support, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) added support for a -webkit prefixed version of the property for web compatibility reasons behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true.

[2] PPK test

[3] The name of the frames() timing function is currently under discussion, so it is currently disabled in browser release versions until a final decision is reached. It is currently turned on in Nightly/Canary only.

Quantum CSS Anmerkungen

  • Gecko has a bug whereby transitions will not work when transitioning from a text-shadow with a color specified to a text-shadow without a color specified  (Bug 726550). This has been fixed in Firefox's new parallel CSS engine (also known as Quantum CSS or Stylo, planned for release in Firefox 57).
  • Another Gecko bug means that cancelling a filling animation (e.g. with animation-fill-mode: forwards set) can trigger a transition set on the same element, although only once (see Bug 1192592 and these test cases for more information). In general declarative animations should not trigger transitions. This has been fixed in Quantum.
  • Another Gecko bug means that the background-position property can't be transitioned between two values containing different numbers of <position> values, for example background-position: 10px 10px; and background-position: 20px 20px, 30px 30px; (see Bug 1390446). Quantum fixes this.

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

 Mitwirkende an dieser Seite: Kairyon
 Zuletzt aktualisiert von: Kairyon,