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

Transitionen 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 werden 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 angibt, dass keine Transitionen auf diesem Element stattfinden. Dies ist der Standardwert.
• Eine oder mehrere Einzel-Eigenschafts-Transitionen, getrennt durch Kommas.

Jede Einzel-Eigenschafts-Transition beschreibt die Transition, die auf eine einzelne Eigenschaft oder alle Eigenschaften angewendet werden soll. Sie beinhaltet:

• null oder einen Wert, der die Eigenschaft(en) repräsentiert, auf die die Transition angewendet werden soll. Dies kann festgelegt werden als:
  • Ein <custom-ident>, das eine einzelne Eigenschaft repräsentiert.
  • Der spezielle Wert all, der angibt, dass die Transition 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 die angegebene Transition trotzdem auf alle sich ändernden Eigenschaften angewendet wird.
• null oder eine <easing-function>-Wert, die die zu verwendende Beschleunigungsfunktion darstellt.
• null, einen oder zwei <time>-Werte. Der erste Wert, der als Zeitwert geparst werden kann, wird der transition-duration zugeordnet, und der zweite Zeitwert wird der transition-delay zugeordnet.
• null oder einen Wert, der angibt, ob Transitionen für Eigenschaften mit diskretem Animationsverhalten diskret gestartet werden sollen. Der Wert ist, falls vorhanden, entweder das Schlüsselwort allow-discrete oder das Schlüsselwort normal.

Wenn Sie all als Übergangseigenschaft für eine Einzel-Eigenschafts-Transition angeben, aber dann nachfolgende Einzel-Eigenschafts-Transitionen mit <custom-ident>-Werten angeben, überschreiben diese nachfolgenden Transitionen die erste. 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 opacity, die 400ms für den Übergang benötigt.

Sehen Sie sich an, wie Dinge gehandhabt werden, wenn Listen von Eigenschaftswerten nicht die gleiche Länge haben. 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 beim Überfahren des Elements mit der Maus eine halbe Sekunde (500ms) Verzögerung, bevor ein background-color-Übergang von zwei Sekunden erfolgt.

HTML

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

CSS

Wir geben zwei <time>-Werte an. 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; } 

Spezifikationen

Browser-Kompatibilität

Siehe auch

• CSS-Transitions Modul
• Verwendung von CSS-Transitions
• TransitionEvent