transition

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

BCD tables only load in the browser

Siehe auch