transition

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

Ü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> (en-US) 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 (en-US) zugewiesen. Der zweite als Zeit parsbare Wert wird der transition-delay (en-US) 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> || <easing-function> || <time>

wobei
<single-transition-property> = all | <custom-ident>
<easing-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 [0,1]>, <number>, <number [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

BCD tables only load in the browser

Siehe auch