CSS Referenzhandbuch

CSS @Regeln (RULES)

Vollständiges Verzeichnis der CSS-Eigenschaften

CSS unicode-bidi Eigenschaft CSS3 transition-property Eigenschaft

CSS3 transition-timing-Verwendung und Beispiel der Funktionseigenschaft

transition-timing-Die Funktion CSS-Eigenschaft legt die Geschwindigkeit des Übergangs fest. Diese Eigenschaft ermöglicht einen Übergang, der die Geschwindigkeit seiner Dauer ändert.

Die folgende Tabelle zeigt die Verwendungsanweisungen und Versionshistorie dieses Eigenschafts, sowie die Syntax in JavaScript-Skripten.

Standardwert:	ease
Geeignet für:	Alle Elemente::before und::after Pseudo-Elemente
Vererbung:	Keine
Animierbar:	Nein.Siehe auch Animationseigenschaften.
Version:	CSS3Neue Funktion
JavaScript-Syntax:	Objekt.style.transitionTimingFunction="ease-in"

transition-timing-Funktionssyntax

Die Syntax dieser Eigenschaft ist wie folgt:

transition-timing-function: linear　|　ease　|　ease-in　|　ease-out　|　ease-in-out　|　cubic-bezier(n,n,n,n)　|　initial　|　inherit

Der folgende Beispiel zeigt, wie man transition verwendet-timing-function Eigenschaft.

Beispiel

button　{
　　　　background:　#fd7c2a;
　　　　/*　Für　Safari　3.0+　*/
　　　　-webkit-transition-property:　background;
　　　　-webkit-transition-duration:　2s;
　　　　　　-webkit-transition-timing-function:　linear;
　　　　
　　　　transition-property:　background;
　　　　transition-duration:　2s;
　　　　　　transition-timing-function:　linear;
}
button:hover　{
　　　　background:　#3cc16e;
}

Testen Sie hier‹/›

Eigenschaftswerte

Die folgende Tabelle beschreibt die Werte dieser Eigenschaft.

Werte	Beschreibung
linear	Bestimmt, dass die Transition mit konstanter Geschwindigkeit von der Anfangsposition zur Endposition erfolgt.
ease	Ähnlich wie fade-in/fade-out, obwohl sie sich am Anfang schneller beschleunigen und bereits in der Nähe des Mittelpunkts abbremsen.
ease-in	Bestimmt, dass die Transition langsam beginnt, sich dann allmählich beschleunigt, bis sie den Endzustand erreicht und plötzlich stoppt.
ease-out	Bestimmt, dass die Transition schnell beginnt und sich dann allmählich verlangsamt, als sie ihrem Endzustand näherkommt.
ease-in-out	Bestimmt, dass die Transition langsam beginnt, sich dann beschleunigt und schließlich abnimmt.
cubic-bezier(n,n,n,n)	Definiert eine dreifache Bezier-Kurve. Auch bekannt als Geschwindigkeitskurve. Mögliche Werte sind von 0 bis1Zwischen den Werten.
initial	Setzen Sie diesen Wert auf seinen Standardwert.
inherit	Wenn angegeben, wird der transition der übergeordneten Elemente verwendet.-timing-function Eigenschaftswerte.

Browserkompatibilität

transition-timing-Die Kompatibilität der function 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.

	Firefox 4+ ^-moz-,16 + Google Chrome 4+ ^-webkit-,26 + Internet Explorer 10+ Apple Safari 3.1+ ^-webkit-,6.1+ Opera 10.5+ ^-o-,12.1+

Weitere Lesung

Bitte beziehen Sie sich auf die folgenden Anleitungen:CSS3 Transitions.

Verwandte Eigenschaften:transition,transition-delay,transition-property,transition-duration.

CSS unicode-bidi Eigenschaft CSS3 transition-property Eigenschaft