Eigenschaft transition-timing-function

Die Eigenschaft transition-timing-function legt die Geschwindigkeitsänderung (Beschleunigung) eines sanften transition-Übergangs fest. Zum Beispiel, zuerst langsam, dann schnell, dann wieder langsam usw.

Syntax

Selektor {
	transition-timing-function: Wert;
}

Werte

Wert	Beschreibung
`ease`	Zuerst langsam, dann schnell, am Ende wieder langsam.
`ease-in`	Beginnt langsam und beschleunigt allmählich.
`ease-out`	Beginnt schnell und verlangsamt sich allmählich bis zum Stillstand.
`ease-in-out`	Zuerst langsam, dann schnell, am Ende wieder langsam. Unterscheidet sich von ease in der Geschwindigkeit.
`linear`	Immer die gleiche Geschwindigkeit.
`step-start`	Keine Animation, die Eigenschaft nimmt sofort den Endwert an.
`step-end`	Keine Animation, die Eigenschaft wartet die in `transition-duraton` angegebene Zeit ab und nimmt dann sofort den Endwert an.
`steps`	Der Wert der Eigenschaft ändert sich sprunghaft.
`cubic-bezier`	Eine Bezier-Kurve, die eine beliebige Animation definieren kann. Siehe Bezier-Kurven-Generator.

Standardwert: ease.

Vergleich verschiedener Werte

Bewegen Sie die Maus über die unten dargestellten Blöcke, um die Funktion aller Arten von Timing-Funktionen zu sehen:

Beispiel

Bewegen Sie die Maus über den Block - er ändert sanft seine Breite über 2 Sekunden. Da der Wert ease-in eingestellt ist, beginnt die Animation langsam und beschleunigt allmählich:

<div id="elem"></div>

#elem {
	border: 1px solid black;
	transition-timing-function: ease-in;
	transition-duration: 2s;
	transition-property: width;
	height: 50px;
	width: 100px;
}
#elem:hover {
	width: 400px;
}

Siehe auch

die Eigenschaft transition-duration,
die die Dauer eines sanften Übergangs angibt
die Eigenschaft transition-property,
die den Eigenschaftsnamen für einen sanften Übergang angibt
die Eigenschaft transition-delay,
die die Verzögerung vor einem sanften Übergang angibt
die Eigenschaft transition,
die eine Kurzform für einen sanften Übergang ist
die Eigenschaft animation,
mit der eine Animation erstellt werden kann