English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Die CSS-Property transition ermöglicht es Ihnen, die Übergangsanimation zwischen zwei Zuständen eines Elements zu definieren. Dies isttransition-property,transition-duration,transition-timing-functionundtransition-delayKurzschreibweise des Attributes
Die folgende Tabelle enthält die Verwendungshinweise und Versionshistorie dieses Attributes sowie die Syntax in JavaScript-Skripten.
| Standardwert: | all 0 ease 0; Alle Attribute anzeigen |
|---|---|
| Geeignet für: | Alle Elemente::before und::after Pseudo-Element |
| Vererbung: | Keine |
| Animationsproduktion: | Nein.Bitte参见 Animationseigenschaften. |
| Version: | CSS3neue Funktion |
| JavaScript-Syntax: | object.style.transition="width 2s" |
Die Syntax dieses Attributes ist wie folgt:
transition: transition1 , transition2, ... transitionN] | initial | inherit wo transition ist: [ transition-property | transition-duration | transition-timing-function | transition-delay ]
Der folgende Beispiel zeigt, wie die transition-Eigenschaft verwendet wird.
button {
background: #fd7c2a;
-webkit-transition-property: background 2s; /* Für Safari 3.0+ */
transition: background 2s;
}
button:hover {
background: #3cc16e;
}Testen Sie heraus‹/›Die folgende Tabelle beschreibt die Werte dieser Eigenschaft.
| Wert | Beschreibung |
|---|---|
| transition-property | Bestimmen Sie den Namen der CSS-Eigenschaft, auf die der Übergang angewendet werden soll. |
| transition-duration | Bestimmen Sie die Anzahl der Sekunden oder Millisekunden, die der Übergang dauern soll. |
| transition-timing-function | Bestimmen Sie, wie die Zwischenwerte der von dem Übergang betroffenen CSS-Eigenschaften berechnet werden. |
| transition-delay | Bestimmen Sie, wann der Übergang beginnen soll. |
| initial | Setzen Sie diesen Wert auf seinen Standardwert. |
| inherit | Wenn angegeben, wird der transition-Wert des übergeordneten Elements verwendet. |
Kompatibilität der transition-Eigenschaft der Browser; die Zahlen in der folgenden Tabelle stellen die niedrigste Versionsnummer der Browser dar, die diese Eigenschaft unterstützen; alle gängigen Browser unterstützen diese Eigenschaft.
|
Bitte beziehen Sie sich auf die folgenden Anleitungen:CSS3 Transitions.
Verwandte Eigenschaften:transition-delay,transition-duration,transition-property,transition-timing-function.