transition

Diese Übersetzung ist unvollständig. Bitte helfen Sie uns, 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.

Übergänge erlauben Ihnen, den Übergang zwischen zwei Stati eines Elements zu betimmen. Verschiedene Stati können etwa durch das Nutzen von pseudo-classes wie :hover oder :active bestimmt oder dynamisch durch JavaScript gesetzt werden.

Syntax

/* 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;

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. Der erste Wert, der als Zeit geparst werden kann, wird der transition-duration zugewiesen. Der zweite als Zeit parsbare Wert wird der transition-delay zugewiesen.

Sehen Sie wie Dinge gehandhabt werden, wenn die Liste der Eigenschaftswerte nicht unterschiedliche Länge haben. Die Kurzfassung ist, dass zusätzliche transition Beschreibungen ignoriert werden, wenn sie die Anzahl der Eigenschaften überschreiten.

Formale Syntax

<single-transition>#

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

wobei
<single-transition-property> = all | <custom-ident>
<timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function>

wobei
<cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number <a href="/de/docs/CSS/Wertdefinitionssyntax#Eckige_Klammern" title="Eckige Klammern: umschließen mehrere Entitäten, Kombinatoren und Multiplikatoren, um diese als eine gesamte Komponente zu behandeln">[0,1]>, <number>, <number <a href="/de/docs/CSS/Wertdefinitionssyntax#Eckige_Klammern" title="Eckige Klammern: umschließen mehrere Entitäten, Kombinatoren und Multiplikatoren, um diese als eine gesamte Komponente zu behandeln">[0,1]>, <number>)
<step-timing-function> = step-start | step-end | steps(<integer>[, <step-position>]?)

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

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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
transitionChrome Vollständige Unterstützung 26
Vollständige Unterstützung 26
Vollständige Unterstützung 1
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Edge Vollständige Unterstützung 12
Vollständige Unterstützung 12
Vollständige Unterstützung 12
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Firefox Vollständige Unterstützung 16
Hinweise
Vollständige Unterstützung 16
Hinweise
Hinweise Before Firefox 57, transitions do not work when transitioning from a text-shadow with a color specified to a text-shadow without a color specified (see bug 726550).
Hinweise Before Firefox 57, cancelling a filling animation (for example, 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).
Hinweise Before Firefox 57, 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).
Vollständige Unterstützung 4
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -moz-
Vollständige Unterstützung 49
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Vollständige Unterstützung 44
Mit Präfix Deaktiviert
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Deaktiviert From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Vollständige Unterstützung 10
Vollständige Unterstützung 10
Vollständige Unterstützung 10
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -ms-
Opera Vollständige Unterstützung 12.1
Vollständige Unterstützung 12.1
Vollständige Unterstützung 15
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Keine Unterstützung 10.1 — 15
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -o-
Safari Vollständige Unterstützung 9
Vollständige Unterstützung 9
Vollständige Unterstützung 3.1
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
WebView Android Vollständige Unterstützung ≤37
Vollständige Unterstützung ≤37
Vollständige Unterstützung 2
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Chrome Android Vollständige Unterstützung 26
Vollständige Unterstützung 26
Vollständige Unterstützung 18
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Firefox Android Vollständige Unterstützung 16
Hinweise
Vollständige Unterstützung 16
Hinweise
Hinweise Before Firefox 57, transitions do not work when transitioning from a text-shadow with a color specified to a text-shadow without a color specified (see bug 726550).
Hinweise Before Firefox 57, cancelling a filling animation (for example, 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).
Hinweise Before Firefox 57, 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).
Vollständige Unterstützung 4
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -moz-
Vollständige Unterstützung 49
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Vollständige Unterstützung 44
Mit Präfix Deaktiviert
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Deaktiviert From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Vollständige Unterstützung 12.1
Vollständige Unterstützung 12.1
Vollständige Unterstützung 14
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Keine Unterstützung 10.1 — 14
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -o-
Safari iOS Vollständige Unterstützung 9
Vollständige Unterstützung 9
Vollständige Unterstützung 2
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Samsung Internet Android Vollständige Unterstützung 1.5
Vollständige Unterstützung 1.5
Vollständige Unterstützung 1.0
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
GradientsChrome Keine Unterstützung NeinEdge Keine Unterstützung 12 — 79Firefox Keine Unterstützung NeinIE Vollständige Unterstützung 10Opera Keine Unterstützung NeinSafari Keine Unterstützung NeinWebView Android Keine Unterstützung NeinChrome Android Keine Unterstützung NeinFirefox Android Keine Unterstützung NeinOpera Android Keine Unterstützung NeinSafari iOS Keine Unterstützung NeinSamsung Internet Android Keine Unterstützung Nein

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.
Benutzer muss dieses Feature explizit aktivieren.
Benutzer muss dieses Feature explizit aktivieren.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.

Siehe auch