transition

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 id="default-example">
  <div id="example-element">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 unter Verwendung von Pseudoklassen wie :hover oder :active definiert werden oder dynamisch mittels JavaScript gesetzt werden.

Zusammensetzende 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 der transition Eigenschaft wird als einer der folgenden angegeben:

• Der spezielle Wert none, der angibt, dass keine Übergänge bei diesem Element stattfinden sollen. Dies ist der Standardwert.
• Eine oder mehrere Einzeleigenschafts-Übergänge, getrennt durch Kommata.

Jeder Einzeleigenschafts-Übergang beschreibt den Übergang, der auf eine einzelne Eigenschaft oder alle Eigenschaften angewendet werden soll. Er beinhaltet:

• Null oder einen Wert, der die Eigenschaft oder die Eigenschaften angibt, auf die der Übergang angewendet werden soll. Dies kann gesetzt werden als:
  • Ein <custom-ident> der eine einzelne Eigenschaft darstellt.
  • Der spezielle Wert all, der angibt, dass der Übergang auf alle Eigenschaften angewendet wird, die sich ändern, wenn das Element den Zustand wechselt.
  • Kein Wert, in welchem Fall ein Wert von all angenommen wird und der spezifizierte Übergang wird dennoch auf alle sich ändernden Eigenschaften angewendet.
• Null oder ein <easing-function> Wert, der die zu verwendende Beschleunigungsfunktion darstellt.
• Null, einen oder zwei <time> Werte. Der erste Wert, der als Zeitwert geparst werden kann, wird der transition-duration zugewiesen, und der zweite, der als Zeitwert geparst werden kann, wird der transition-delay zugewiesen.
• Null oder einen Wert, der angibt, ob Übergänge für Eigenschaften gestartet werden, deren Animationverhalten diskret ist. Der Wert, falls vorhanden, ist entweder das Schlüsselwort allow-discrete oder das Schlüsselwort normal.

Wenn Sie all als die Übergangseigenschaft für einen Einzeleigenschafts-Übergang angeben, aber dann nachfolgende Einzeleigenschafts-Übergänge mit <custom-ident> Werten angeben, werden diese nachfolgenden Ü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 wechselt, mit einer Dauer von 200ms übergehen, außer der opacity, die 400ms benötigt, um zu übergehen.

Sehen Sie wie Dinge gehandhabt werden, wenn Listen von Eigenschaftswerten nicht gleich lang sind. Kurz gesagt, zusätzliche Übergangsbeschreibungen, die über die Anzahl der tatsächlich animierten Eigenschaften hinausgehen, 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>? )  

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

Beispiele

Einfaches Beispiel

In diesem Beispiel gibt es eine halbe Sekunde (500ms) Verzögerung, bevor ein zweisekündiger background-color Übergang stattfindet, wenn der Benutzer über das Element fährt.

HTML

<a class="target">Hover over me</a>

CSS

Wir fügen zwei <time> Werte ein. In der transition Kurzschreibweise ist der erste <time> Wert die transition-duration. Der zweite Zeitwert ist die transition-delay. Beide haben einen Standardwert von 0s, 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
• Verwendung von CSS-Übergängen
• TransitionEvent