transition-property
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.
Die transition-property
CSS Eigenschaft legt fest, auf welche CSS-Eigenschaften ein Übergangseffekt angewendet werden soll.
Probieren Sie es aus
transition-property: margin-right;
transition-property: margin-right, color;
transition-property: all;
transition-property: none;
<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%;
}
Wenn Sie eine Kurzschreibweise angeben (z.B. background
), werden alle Untereigenschaften in Langform, die animiert werden können, ebenfalls animiert.
Syntax
/* Keyword values */
transition-property: none;
transition-property: all;
/* <custom-ident> values */
transition-property: test_05;
transition-property: -specific;
transition-property: sliding-vertically;
/* Multiple values */
transition-property: test1, animation4;
transition-property: all, height, color;
transition-property:
all,
-moz-specific,
sliding;
/* Global values */
transition-property: inherit;
transition-property: initial;
transition-property: revert;
transition-property: revert-layer;
transition-property: unset;
Werte
none
-
Es werden keine Eigenschaften überführt.
all
-
Alle Eigenschaften, die überführt werden können, werden überführt.
<custom-ident>
-
Ein String, der die Eigenschaft identifiziert, auf die ein Übergangseffekt angewendet werden soll, wenn sich ihr Wert ändert.
Formale Definition
Anfangswert | alle |
---|---|
Anwendbar auf | alle Elemente, ::before und ::after Pseudoelemente |
Vererbt | Nein |
Berechneter Wert | wie angegeben |
Animationstyp | Not animatable |
Formale Syntax
transition-property =
none |
<single-transition-property>#
<single-transition-property> =
all |
<custom-ident>
Beispiele
Einfaches Beispiel
Wenn der Button fokussiert oder überfahren wird, durchläuft er eine einsekündige Farbüberblendung; die transition-property
ist background-color
.
HTML
<button class="target">Focus me!</button>
CSS
.target {
transition-property: background-color;
transition-duration: 1s;
background-color: #ccc;
}
.target:hover,
.target:focus {
background-color: #eee;
}
Siehe unseren Leitfaden zur Verwendung von CSS-Übergängen für weitere Beispiele zur transition-property
.
Spezifikationen
Specification |
---|
CSS Transitions # transition-property-property |
Browser-Kompatibilität
BCD tables only load in the browser