Eigenschaft animation-timing-function

Die Eigenschaft animation-timing-function legt die Geschwindigkeitsänderung (Beschleunigung) einer Animation fest. Zum Beispiel: zuerst langsam, dann schnell, dann wieder langsam usw.

Syntax

Selektor {
	animation-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 `animation-duraton` angegebene Zeit ab und nimmt dann sofort den Endwert an.
`steps`	Der Wert der Eigenschaft ändert sich sprunghaft.
`cubic-bezier`	Eine Bézier-Kurve, die eine beliebige Animation definieren kann. Siehe Bézier-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:

Siehe auch

die Eigenschaft animation,
die eine Kurzform-Eigenschaft für Animationen darstellt
die Regel @keyframes,
die die Keyframes einer Animation definiert
fließende Übergänge transition, die eine Animation beim Überfahren eines Elements darstellen