DietransitionCSS Eigenschaft ist eineKurzschreibweise fürtransition-property,transition-duration,transition-timing-function,transition-delay, undtransition-behavior.

Probieren Sie es aus

transition: margin-right 2s;

transition: margin-right 2s 0.5s;

transition: margin-right 2s ease-in-out;

transition: margin-right 2s ease-in-out 0.5s;

transition:  margin-right 2s,  color 1s;

transition: all 1s ease-out;

<section>  <div>Hover to see<br />the transition.</div></section>

#example-element {  background-color: #e4f0f5;  color: black;  padding: 1rem;  border-radius: 0.5rem;  font: 1em monospace;  width: 100%;  transition: margin-right 2s;}#default-example:hover > #example-element {  background-color: #990099;  color: white;  margin-right: 40%;}

Transitions ermöglichen es Ihnen, den Übergang zwischen zwei Zuständen eines Elements zu definieren. Verschiedene Zustände können mitPseudoklassen wie:hover oder:active definiert oder dynamisch mit JavaScript gesetzt werden.

Zugehörige Eigenschaften

Diese Eigenschaft ist eine Kurzschreibweise für die folgenden CSS-Eigenschaften:

• transition-behavior
• transition-delay
• transition-duration
• transition-property
• transition-timing-function

Syntax

/* Apply to 1 property *//* property name | duration */transition: margin-right 4s;/* property name | duration | delay */transition: margin-right 4s 1s;/* property name | duration | easing function */transition: margin-right 4s ease-in-out;/* property name | duration | easing function | delay */transition: margin-right 4s ease-in-out 1s;/* property name | duration | behavior */transition: display 4s allow-discrete;/* Apply to 2 properties */transition:  margin-right 4s,  color 1s;/* Apply to all changed properties */transition: all 0.5s ease-out allow-discrete;transition: 200ms linear 50ms;/* Global values */transition: inherit;transition: initial;transition: revert;transition: revert-layer;transition: unset;

Der Wert dertransition-Eigenschaft wird wie folgt angegeben:

• Der spezielle Wertnone, der angibt, dass auf diesem Element keine Übergänge stattfinden werden. Dies ist der Standardwert.
• Eine oder mehrere Einzelwartung Übergänge, getrennt durch Kommas.

Jede Einzelwartung beschreibt den Übergang, der auf eine einzelne Eigenschaft oder alle Eigenschaften angewendet werden soll. Sie umfasst:

• null oder einen Wert, der die Eigenschaft oder Eigenschaften darstellt, auf die der Übergang angewendet werden soll. Dies kann festgelegt werden als:
  • Ein<custom-ident>, das eine einzelne Eigenschaft darstellt.
  • Der spezielle Wertall, der festlegt, dass der Übergang auf alle Eigenschaften angewendet wird, die sich ändern, wenn das Element den Zustand ändert.
  • Kein Wert, in diesem Fall wirdall angenommen und der spezifizierte Übergang wird weiterhin auf alle sich ändernden Eigenschaften angewandt.
• null oder einen<easing-function> Wert, der die zu verwendende Erleichterungsfunktion darstellt.
• null, einen oder zwei<time> Werte. Der erste Wert, der als Zeitwert geparst werden kann, wird dertransition-duration zugeordnet, und der zweite Wert, der als Zeitwert geparst werden kann, wird dertransition-delay zugeordnet.
• null oder einen Wert, der angibt, ob Übergänge für Eigenschaften gestartet werden sollen, deren Animationsverhaltendiskret ist. Der Wert, sofern vorhanden, ist entweder das Schlüsselwortallow-discrete oder das Schlüsselwortnormal.

Wenn Sieall als Übergangseigenschaft für einen Einzelwartung-Übergang angeben, aber dann folgende Einzelwartung-Übergänge mit<custom-ident> Werten spezifizieren, werden diese folgenden Übergänge den ersten überschreiben. Zum Beispiel:

transition:  all 200ms,  opacity 400ms;

In diesem Fall werden alle Eigenschaften, die sich ändern, wenn das Element den Zustand ändert, mit einer Dauer von 200ms übergehen, außeropacity, das 400ms für den Übergang benötigt.

Sehen Siewie Dinge gehandhabt werden, wenn Listen von Eigenschaftswerten nicht gleich lang sind. Kurz gesagt, zusätzliche Übergangsbeschreibungen über die Anzahl der tatsächlich animierten Eigenschaften hinaus werden ignoriert.

Formale Definition

Formale Syntax

transition =
<single-transition>#

<single-transition> =
[none|<single-transition-property>]||
<time>||
<easing-function>||
<time>||
<transition-behavior-value>

<single-transition-property> =
all|
<custom-ident>

<easing-function> =
<linear-easing-function>|
<cubic-bezier-easing-function>|
<step-easing-function>

<transition-behavior-value> =
normal|
allow-discrete

<linear-easing-function> =
linear|
<linear()>

<cubic-bezier-easing-function> =
ease|
ease-in|
ease-out|
ease-in-out|
<cubic-bezier()>

<step-easing-function> =
step-start|
step-end|
<steps()>

<linear()> =
linear([<number>&&<percentage>{0,2}]#)

<cubic-bezier()> =
cubic-bezier([<number [0,1]> ,<number>]#{2})

<steps()> =
steps(<integer> ,<step-position>?)

<integer> =
<number-token>

<step-position> =
jump-start|
jump-end|
jump-none|
jump-both|
start|
end

Beispiele

Einfaches Beispiel

In diesem Beispiel gibt es, wenn der Benutzer über das Element fährt, eine Verzögerung von einer halben Sekunde (500ms), bevor ein zweisekündigerbackground-color-Übergang erfolgt.

HTML

<a>Hover over me</a>

CSS

Wir schließen zwei<time> Werte ein. In dertransition-Kurzschreibweise ist der erste<time> Wert dietransition-duration. Der zweite Zeitwert ist dietransition-delay. Beide stehen standardmäßig auf0s, wenn sie weggelassen werden.

.target {  font-size: 2rem;  background-color: palegoldenrod;  transition: background-color 2s 500ms;}.target:hover {  background-color: darkorange;}

Spezifikationen

Browser-Kompatibilität

Siehe auch

• CSS-Übergänge Modul
• CSS-Übergänge verwenden
• TransitionEvent