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 mit Pseudoklassen 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 der transition-Eigenschaft wird wie folgt angegeben:

• Der spezielle Wert none, 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 Wert all, der festlegt, dass der Übergang auf alle Eigenschaften angewendet wird, die sich ändern, wenn das Element den Zustand ändert.
  • Kein Wert, in diesem Fall wird all 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 der transition-duration zugeordnet, und der zweite Wert, der als Zeitwert geparst werden kann, wird der transition-delay zugeordnet.
• null oder einen Wert, der angibt, ob Übergänge für Eigenschaften gestartet werden sollen, deren Animationsverhalten diskret ist. Der Wert, sofern vorhanden, ist entweder das Schlüsselwort allow-discrete oder das Schlüsselwort normal.

Wenn Sie all 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ßer opacity, das 400ms für den Übergang benötigt.

Sehen Sie wie 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>? )  

<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ündiger background-color-Übergang erfolgt.

HTML

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

CSS

Wir schließen zwei <time> Werte ein. In der transition-Kurzschreibweise ist der erste <time> Wert die transition-duration. Der zweite Zeitwert ist die transition-delay. Beide stehen standardmäßig auf 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
• CSS-Übergänge verwenden
• TransitionEvent