Die transition
CSS Eigenschaft ist eine Kurzschreibweise für transition-property
, transition-duration
, transition-timing-function
und transition-delay
.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
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.
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.
- das Schlüsselwort
- 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 dertransition-duration
zugewiesen. Der zweite als Zeit parsbare Wert wird dertransition-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> || <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
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