transition
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
* Some parts of this feature may have varying levels of support.
Die transition
CSS Eigenschaft ist eine Kurzform-Eigenschaft für transition-property
, transition-duration
, transition-timing-function
, transition-delay
und transition-behavior
.
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: #000;
padding: 1rem;
border-radius: 0.5rem;
font: 1em monospace;
width: 100%;
transition: margin-right 2s;
}
#default-example:hover > #example-element {
background-color: #909;
color: #fff;
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 oder dynamisch mit JavaScript gesetzt werden.
Bestandeigenschaften
Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:
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 bei diesem Element stattfinden werden. Dies ist der Standardwert. - Eine oder mehrere Einzel-Eigenschafts-Transitionen, getrennt durch Kommas.
Jede Einzel-Eigenschafts-Transition beschreibt den Übergang, der auf eine einzelne Eigenschaft oder alle Eigenschaften angewendet werden soll. Sie enthält:
- null oder einen Wert, der die Eigenschaft(en) repräsentiert, auf die die Transition angewendet werden soll. Dies kann gesetzt 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 seinen Zustand ändert. - Kein Wert, in welchem Fall ein Wert von
all
hergeleitet wird, und die angegebene Transition wird dennoch auf alle sich ändernden Eigenschaften angewendet.
- Ein
- null oder einen
<easing-function>
Wert, der die zu verwendende Wegfunktion repräsentiert - null, ein oder zwei
<time>
Werte. Der erste Wert, der als Zeit geparst werden kann, wird dertransition-duration
zugewiesen, und der zweite Wert, der als Zeit geparst werden kann, wird dertransition-delay
zugewiesen. - null oder einen Wert, der erklärt, ob Transitionen für Eigenschaften beginnen sollen, deren Animationsverhalten diskret ist. Der Wert ist, falls vorhanden, entweder das Schlüsselwort
allow-discrete
oder das Schlüsselwortnormal
.
Wenn Sie all
als die Transition-Eigenschaft für eine einzelne-Eigenschafts-Transition angeben, dann aber nachfolgende Einzel-Eigenschafts-Transitionen mit <custom-ident>
Werten spezifizieren, werden diese nachfolgenden Transitionen die erste ü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
, die 400ms benötigt, um zu übergehen.
Sehen Sie wie es gehandhabt wird, wenn Listen von Eigenschaftswerten nicht die gleiche Länge haben. Kurz gesagt, zusätzliche Transition-Beschreibungen, die über die Anzahl der tatsächlich animierten Eigenschaften hinausgehen, werden ignoriert.
Formale Definition
Anfangswert | wie die jeweiligen Kurzschreibweisen:
|
---|---|
Anwendbar auf | alle Elemente, ::before und ::after Pseudoelemente |
Vererbt | Nein |
Berechneter Wert | wie die jeweiligen Kurzschreibweisen:
|
Animationstyp | Not animatable |
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 gibt es, wenn der Benutzer über das Element fährt, eine halbe Sekunde (500ms
) Verzögerung, bevor eine zweisekündige background-color
Transition auftritt.
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 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
Specification |
---|
CSS Transitions # transition-shorthand-property |
Browser-Kompatibilität
BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.