CSS -Übergangseigenschaft Eigenschaft
Beispiel
Bewegen Sie den Mauszeiger über ein <div>-Element und ändern Sie die Breite mit einem fließenden Übergangseffekt:
div
{
transition-property: width;
}
div:hover {
width: 300px;
}
Weitere „Probieren Sie es selbst“-Beispiele weiter unten.
Definition und Verwendung
Die transition-property
Eigenschaft gibt den Namen der CSS-Eigenschaft an, für die der Übergangseffekt bestimmt ist (der Übergangseffekt beginnt, wenn sich die angegebene CSS-Eigenschaft ändert).
Tipp: Ein Übergangseffekt kann normalerweise auftreten, wenn ein Benutzer mit der Maus über ein Element fährt.
Hinweis: Geben Sie immer die Eigenschaft transit-duration an, andernfalls ist die Dauer 0 und der Übergang hat keine Auswirkung.
Standardwert: | alle |
---|---|
Vererbt: | Nein |
Animierbar: | Nein. Lesen Sie mehr über animierbare |
Ausführung: | CSS3 |
JavaScript-Syntax: | Objekt .style.transitionProperty="Breite,Höhe" |
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt.
Zahlen gefolgt von -webkit-, -moz- oder -o- geben die erste Version an, die mit einem Präfix funktioniert hat.
Property | |||||
---|---|---|---|---|---|
transition-property | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
CSS-Syntax
transition-property: none|all|property|initial|inherit;
Eigenschaftswerte
Value | Description |
---|---|
none | No property will get a transition effect |
all | Default value. All properties will get a transition effect |
property | Defines a comma separated list of CSS property names the transition effect is for |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Mehr Beispiele
Beispiel
Bewegen Sie den Mauszeiger über ein <div>-Element und ändern Sie die Breite UND Höhe mit einem sanften Übergangseffekt:
div {
transition-property: width, height;
}
div:hover {
width: 300px;
height: 300px;
}
Verwandte Seiten
CSS-Tutorial: CSS-Übergänge
HTML-DOM-Referenz: Eigenschaft transitionProperty