Beispiel
Bewegen Sie den Mauszeiger über ein <div> Element, und die Breite ändern mit einem glatten Übergang Wirkung:
div
{
-webkit-transition-property: width; /* Safari */
transition-property: width;
}
div:hover {
width: 300px;
} Versuch es selber " Mehr "Try it Yourself" Sie "Try it Yourself" Beispiele unten.
Definition und Verwendung
Der Übergang-Eigenschaft Eigenschaft gibt den Namen der CSS - Eigenschaft der Übergangseffekt ist für (the transition effect will start when the specified CSS property changes) , (the transition effect will start when the specified CSS property changes) - (the transition effect will start when the specified CSS property changes) wird (the transition effect will start when the specified CSS property changes) .
Tip: Ein Übergangseffekt könnte typischerweise auftreten , wenn ein Benutzer schweben über einem Element.
Note: Immer die Übergangsdauer Eigenschaft angeben, da sonst die Dauer 0, und der Übergang wird keine Auswirkungen haben.
| Standardwert: | all |
|---|---|
| Vererbt: | no |
| Anima: | no. Read about animatable |
| Version: | CSS3 |
| JavaScript-Syntax: | object .style.transitionProperty="width,height" Try it |
Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die die Eigenschaft vollständig unterstützt.
Zahlen, gefolgt von -webkit-, -moz- oder -o- die erste Version an, die mit einem Präfix gearbeitet.
| Eigentum | |||||
|---|---|---|---|---|---|
| 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
| Wert | Beschreibung |
|---|---|
| none | Keine Eigenschaft wird einen Übergangseffekt erhalten |
| all | Standardwert. Alle Objekte werden einen Übergangseffekt erhalten |
| property | Definiert eine durch Kommata getrennte Liste von CSS-Eigenschaft Namen der Übergangseffekt ist für |
| initial | Setzt diese Eigenschaft auf den Standardwert. Lesen Sie mehr über Anfangs |
| inherit | Erbt diese Eigenschaft von seinem übergeordneten Element. Lesen Sie mehr über erben |
Mehr Beispiele
Beispiel
Bewegen Sie den Mauszeiger über ein <div> Element, und ändern Sie die Breite und Höhe mit einem glatten Übergang Wirkung:
div {
-webkit-transition-property: width, height; /*
Safari */
transition-property: width, height;
}
div:hover {
width: 300px;
height: 300px;
} Versuch es selber " Verwandte Seiten
CSS Tutorial: CSS3 Transitions
HTML - DOM - Referenz: transitionProperty property