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%;
}

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

Bestandteile der Eigenschaft

Diese Eigenschaft ist eine Kurzform 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 wie folgt angegeben:

• Der spezielle Wert none, der angibt, dass keine Übergänge auf diesem Element stattfinden. Dies ist der Standardwert.
• Eine oder mehrere Übergänge für eine einzelne Eigenschaft, getrennt durch Kommas.

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

• null oder einen Wert, der die Eigenschaft oder Eigenschaften darstellt, auf die der Übergang angewendet werden soll. Dies kann gesetzt sein als:
  • Ein <custom-ident> der eine einzelne Eigenschaft repräsentiert.
  • Der spezielle Wert all, der angibt, dass der Übergang auf alle Eigenschaften, die sich bei Zustandsänderung des Elements ändern, angewendet wird.
  • Kein Wert, in welchem Fall all angenommen wird und der angegebene Übergang trotzdem auf alle sich ändernden Eigenschaften angewendet wird.
• null oder einen <easing-function>-Wert, der die zu verwendende Beschleunigungsfunktion darstellt
• null, ein oder zwei <time>-Werte. Der erste Wert, der als Zeit interpretierbar ist, wird der transition-duration zugewiesen, und der zweite Wert, der als Zeit interpretierbar ist, wird der transition-delay zugewiesen.
• null oder einen Wert, der erklärt, ob Übergänge für Eigenschaften gestartet werden sollen, deren Animationsverhalten diskret ist. Der Wert ist, falls vorhanden, entweder das Schlüsselwort allow-discrete oder das Schlüsselwort normal.

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

transition:
  all 200ms,
  opacity 400ms;

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

Sehen Sie, wie Dinge gehandhabt werden, wenn Listen von Eigenschaftswerten nicht die gleiche Länge haben. 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>? )  

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

Beispiele

Einfaches Beispiel

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

HTML

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

CSS

Wir schließen zwei <time>-Werte ein. In der transition-Kurzform ist der erste <time>-Wert die transition-duration. Der zweite Zeitwert ist die transition-delay. Beide sind bei Auslassung standardmäßig 0s.

.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