CSS transition-property-Eigenschaft
Die transition-property-Eigenschaft gibt die Namen der Eigenschaften für die transition an. Sie akzeptiert eine durch Kommas getrennte Liste von Eigenschaftsnamen oder das Schlüsselwort all, um alle Eigenschaften eines Elements zu animieren.
Die transition-property ist eine der CSS3-Eigenschaften.
WARNING
Nicht alle Eigenschaften in CSS können animiert werden.
INFO
Vendor-Prefixes (z. B. -webkit-, -moz-, -o-) sind für CSS-Transitions in modernen Browsern nicht mehr erforderlich.
| Anfangswert | all |
|---|---|
| Anwendbar auf | Alle Elemente, ::before und ::after Pseudo-Elemente. |
| Vererbbar | Nein. |
| Animierbar | Nein (steuert, welche Eigenschaften animiert werden, ist aber selbst nicht animierbar). |
| Version | CSS3 |
| DOM-Syntax | object.style.transitionProperty = "height"; |
Hinweis: In modernem CSS wird empfohlen, stattdessen die Kurzschreibweise transition zu verwenden.
Syntax
CSS transition-property-Werte
transition-property: none | all | property | initial | inherit;Beispiel für die transition-property-Eigenschaft:
CSS transition-property-Codebeispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 100px;
height: 100px;
background: #666;
transition-duration: 1s;
transition-property: height;
}
div:hover {
height: 200px;
}
</style>
</head>
<body>
<h2>Transition-property property example</h2>
<p>Hover over the element to see the effect.</p>
<div></div>
</body>
</html>Beispiel für die transition-property-Eigenschaft mit animierter Breite und Höhe:
CSS transition-property weiteres Codebeispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 100px;
height: 100px;
background: #666;
transition-duration: 1s;
transition-property: width, height;
}
div:hover {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<h2>Transition-property property example</h2>
<p>Hover over the element to see the effect.</p>
<div></div>
</body>
</html>Beispiel für die transition-property-Eigenschaft mit animierter Hintergrundfarbe:
Beispiel für transition-property mit animierter Hintergrundfarbe:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: #666666;
transition-duration: 1s;
transition-property: background-color;
}
div:hover {
background-color: #8ebf42;
}
</style>
</head>
<body>
<h2>Transition-property property example</h2>
<p>Hover over the element to see the effect.</p>
<div></div>
</body>
</html>Beispiel für die transition-property-Eigenschaft mit animierter Hintergrundfarbe und linker Positionsverschiebung:
Beispiel für transition-property mit animierter Hintergrundfarbe und linker Positionsverschiebung
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.element {
padding: 1em;
width: 30px;
height: 30px;
left: 0;
cursor: pointer;
background-color: #8ebf42;
position: relative;
transition-property: background-color, left;
transition-duration: 1s, 1s;
transition-timing-function: ease-out, cubic-bezier(.82, .1, .14, 1);
}
.element:hover {
left: 250px;
background-color: purple;
}
</style>
</head>
<body>
<div class="container">
<p>Hover over the box to see the element's background color and left position offset transition.</p>
<div class="element"></div>
</div>
</body>
</html>Beispiel für die transition-property-Eigenschaft mit animierter Schriftart:
Beispiel für CSS transition-property mit den Eigenschaften letter-spacing, font-size und line-height
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
span {
display: inline-block;
font-family: sans-serif;
transition-duration: 0.6s;
letter-spacing: 1px;
font-size: 20px;
line-height: 28px;
color: #777777;
transition-property: letter-spacing, font-size, line-height;
}
span:hover {
color: #0f9881;
letter-spacing: 6px;
font-size: 26px;
line-height: 34px;
}
</style>
</head>
<body>
<h2>Transition-property property example</h2>
<span>Hover over the text to see the effect</span>
</body>
</html>Werte
| Wert | Beschreibung |
|---|---|
| none | Es wird kein Übergangseffekt angezeigt. |
| all | Der Übergangseffekt wird auf alle Eigenschaften angewendet. |
| property | Gibt eine durch Kommas getrennte Liste von CSS-Eigenschaftsnamen für den Übergangseffekt an. |
| initial | Setzt diese Eigenschaft auf ihren Standardwert zurück. |
| inherit | Erbt diese Eigenschaft von ihrem übergeordneten Element. |
Praxis
Welche Aussage über transition-property ist korrekt?