CSS3 Übergang Eigenschaft
Beispiele
Bewegen Sie den Mauszeiger über ein div-Element, und allmählich die Breite der Tabelle zu ändern von 100px zu 300px ::
div
{
width: 100px;
Übergang: Breite 2s;
-webkit-Übergang: Breite 2s / * Safari * /
}
div: Hover {width: 300px;}
{
width: 100px;
Übergang: Breite 2s;
-webkit-Übergang: Breite 2s / * Safari * /
}
div: Hover {width: 300px;}
Versuchen »
Browser-Unterstützung
Die Zahlen in der Tabelle stellen die erste Browser die Versionsnummer der Immobilie zu unterstützen.
Unmittelbar im Anschluss an die digitale -webkit-, -MS- oder vor zur Unterstützung der Präfix Attributnummer erste Browser-Version -moz-.
| 属性 | |||||
|---|---|---|---|---|---|
| transition | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
Attributdefinitionen und Anweisungen
Übergang Eigenschaft ist eine Kurzschrift-Eigenschaft hat vier Attribute: transition-Eigenschaft, Übergangsdauer, Übergang-Timing-Funktion und Übergangsverzögerung.
Hinweis: Immer übergangs Dauer Eigenschaft angeben, sonst Dauer von 0, wird Übergang keine Wirkung.
| Standard: | alle 0 Leichtigkeit 0 |
|---|---|
| Vererbung: | keine |
| Version: | CSS3 |
| JavaScript-Syntax: | Objekt .style.transition = "width 2s" |
Grammatik
Übergang: Eigenschaft Dauer Timing-Funktion Verzögerung;
| 值 | 描述 |
|---|---|
| transition-property | 指定CSS属性的name，transition效果 |
| transition-duration | transition效果需要指定多少秒或毫秒才能完成 |
| transition-timing-function | 指定transition效果的转速曲线 |
| transition-delay | 定义transition效果开始的时候 |