Beispiel
Bewegen Sie den Mauszeiger über ein <div> Element , um allmählich die Breite von 100px zu 300px ändern:
div
{
width: 100px;
-webkit-transition: width 2s; /* Safari 3.1 to 6.0 */
transition: width 2s;
}
div:hover {
width: 300px;
}
Versuch es selber " Mehr "Try it Yourself" Sie "Try it Yourself" Beispiele unten.
Definition und Verwendung
Der Übergang Eigenschaft ist eine zusammenfassende Eigenschaft für die vier Übergangseigenschaften:
Übergang-Eigenschaft, Übergangsdauer, Übergang-Timing-Funktion und Übergangsverzögerung.
Note: Immer die Übergangsdauer Eigenschaft angeben, da sonst die Dauer 0 s ist, und der Übergang wird keine Auswirkungen haben.
| Standardwert: | all 0s ease 0s |
|---|---|
| Vererbt: | no |
| Anima: | no. Read about animatable |
| Version: | CSS3 |
| JavaScript-Syntax: | object .style.transition="all 2s" 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 | 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 duration timing-function delay|initial|inherit;Eigenschaftswerte
| Wert | Beschreibung |
|---|---|
| transition-property | Gibt den Namen der CSS-Eigenschaft der Übergangseffekt ist für |
| transition-duration | Gibt an, wie viele Sekunden oder Millisekunden der Übergangseffekt in Anspruch nimmt |
| transition-timing-function | Gibt die Geschwindigkeitskurve des Übergangseffekt |
| transition-delay | Legt fest, wann der Übergangseffekt beginnt |
| 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
Wenn ein <input type="text"> Fokus erhält, ändern sich allmählich die Breite von 100px zu 250px:
input[type=text] {
width: 100px;
-webkit-transition: ease-in-out, width .35s ease-in-out; /* Safari 3.1 to 6.0 */
transition: ease-in-out, width .35s ease-in-out;
}
input[type=text]:focus {
width: 250px;
} Versuch es selber " Verwandte Seiten
CSS Tutorial: CSS3 Transitions
HTML - DOM - Referenz: transition property