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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
Grundlegende UnterstützungChrome 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 10Opera 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 6.1
Vollständige Unterstützung 6.1
Vollständige Unterstützung 3
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
WebView Android Vollständige Unterstützung Ja
Vollständige Unterstützung Ja
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 Ja
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Edge Mobile 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 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 15
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 Ja
Vollständige Unterstützung Ja
Vollständige Unterstützung 3.2
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Samsung Internet Android Vollständige Unterstützung Ja
Vollständige Unterstützung Ja
Vollständige Unterstützung Ja
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Gradients
Experimentell
Chrome Keine Unterstützung NeinEdge Vollständige Unterstützung 12Firefox Keine Unterstützung NeinIE Vollständige Unterstützung 10Opera Keine Unterstützung NeinSafari Keine Unterstützung NeinWebView Android Keine Unterstützung NeinChrome Android ? Edge Mobile Vollständige Unterstützung JaFirefox 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
Kompatibilität unbekannt  
Kompatibilität unbekannt
Experimentell. Das Verhalten kann sich zukünftig ändern.
Experimentell. Das Verhalten kann sich zukünftig ändern.
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

Schlagwörter des Dokuments und Mitwirkende

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