transition

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: #909;
  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 mittels JavaScript gesetzt werden.

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

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

/* 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 Einzeleigenschafts-Übergänge, getrennt durch Kommas.

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

• null oder einen Wert, der die Eigenschaft(en) darstellt, auf die der Übergang angewendet werden soll. Das kann wie folgt festgelegt werden:
  • Ein <custom-ident>, der eine einzelne Eigenschaft repräsentiert.
  • Der spezielle Wert all, der angibt, dass der Übergang auf alle Eigenschaften angewendet wird, die sich ändern, wenn das Element den Zustand ändert.
  • Kein Wert, wobei dann ein Wert von all angenommen wird und der angegebene Übergang dennoch auf alle sich ändernden Eigenschaften angewendet wird.
• null oder einen <easing-function> Wert, der die zu verwendende Übergangsfunktion repräsentiert
• null, einen oder zwei <time> Werte. Der erste Wert, der als Zeit interpretiert werden kann, wird der transition-duration zugewiesen, und der zweite, der als Zeit interpretiert werden kann, wird der transition-delay zugewiesen.
• null oder einen Wert, der erklärt, ob Übergänge für Eigenschaften, deren Animationsverhalten diskret ist, gestartet werden sollen. Der Wert, falls vorhanden, ist entweder das Schlüsselwort allow-discrete oder das Schlüsselwort normal.

Wenn Sie all als Übergangseigenschaft für einen Einzeleigenschafts-Übergang angeben, aber dann nachfolgende Einzeleigenschafts-Ü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, wenn das Element den Zustand ändert, mit einer Dauer von 200ms übergehen, außer opacity, das 400ms benötigt, um zu übergehen.

Sehen Sie sich an, 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.

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         

In diesem Beispiel gibt es, wenn der Benutzer über das Element fährt, 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 hinzu. In der transition Kurzform ist der erste <time> Wert die transition-duration. Der zweite Zeitwert ist die transition-delay. Beide haben den Standardwert 0s, wenn sie weggelassen werden.

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

.target:hover {
  background-color: darkorange;
}

• CSS transitions Modul
• Verwendung von CSS-Übergängen
• TransitionEvent