transition

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

Der Quellcode dieses interaktiven Beispiels wird in einem Github-Repository gepflegt. Falls Sie zu dem Projekt für interaktive Beispiele beitragen möchten, klonen Sie bitte https://github.com/mdn/interactive-examples und schicken Sie uns einen Pull Request.

Ü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.

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

<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([0,1]>, <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

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

• Verwendung von CSS transitions
• TransitionEvent