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. Unterschiedliche Zustände können durch Pseudoklassen wie :hover oder :active definiert oder dynamisch mit JavaScript gesetzt werden.

Bestandteileigenschaften

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 als einer der folgenden angegeben:

• Der spezielle Wert none, der spezifiziert, dass keine Übergänge bei diesem Element stattfinden werden. Dies ist der Standardwert.
• Eine oder mehrere Einzelattribute-Übergänge, getrennt durch Kommas.

Jeder Einzelattribute-Übergang beschreibt den Übergang, der auf ein einzelnes Attribut oder alle Attribute angewendet werden soll. Es beinhaltet:

• null oder einen Wert, der das Attribut oder die Attribute repräsentiert, auf die der Übergang angewendet werden soll. Dies kann festgelegt werden als:
  • Ein <custom-ident>, das ein einzelnes Attribut repräsentiert.
  • Der spezielle Wert all, der spezifiziert, dass der Übergang auf alle Attribute angewendet wird, die sich ändern, wenn das Element den Zustand ändert.
  • Kein Wert, in welchem Fall ein Wert von all angenommen wird, und der spezifizierte Übergang wird weiterhin auf alle sich ändernden Attribute angewendet.
• null oder ein <easing-function> Wert, der die zu verwendende Verzögerungsfunktion darstellt
• null, ein oder zwei <time> Werte. Der erste Wert, der als Zeitwert geparst werden kann, wird dem transition-duration zugewiesen, und der zweite Wert, der als Zeitwert geparst werden kann, wird dem transition-delay zugewiesen.
• null oder ein Wert, der erklärt, ob Übergänge für Attribute starten sollen, deren Animationsverhalten diskret ist. Der Wert, falls vorhanden, ist entweder das Schlüsselwort allow-discrete oder das Schlüsselwort normal.

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

transition:
  all 200ms,
  opacity 400ms;

In diesem Fall werden alle Attribute, die sich ändern, wenn das Element den Zustand ändert, mit einer Dauer von 200ms übergehen, mit Ausnahme von opacity, das 400ms benötigt, um den Übergang durchzuführen.

Sehen Sie, wie Dinge gehandhabt werden, wenn Listen von Attributwerten nicht die gleiche Länge haben. Kurz gesagt, zusätzliche Übergangsbeschreibungen, die über die Anzahl der tatsächlich animierten Attribute hinausgehen, werden ignoriert.

Formale Definition

Formale Syntax

transition = 
  <single-transition>#  

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

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

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

<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, wenn der Benutzer über das Element fährt, gibt es eine halbe Sekunde (500ms) Verzögerung, bevor ein zwei-Sekunden background-color Übergang stattfindet.

HTML

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

CSS

Wir fügen zwei <time> Werte ein. In der transition-Kurzform ist der erste <time> Wert der transition-duration. Der zweite Zeitwert ist die transition-delay. Beide haben, falls ausgelassen, den Standardwert 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 transitions Modul
• Anwendung von CSS Übergängen
• TransitionEvent