Cheat Sheet für Easing-Funktionen

Übergangsfunktionen(engl. easing functions) bestimmen die Änderungsrate eines Parameters im Verlauf der Zeit.

Gegenstände in der Realität bewegen sich selten ruckartig oder mit konstanter Geschwindigkeit. Öffnen wir eine Schublade, dann ziehen wir erst stark und bremsen die Bewegung dann ab. Lassen wir einen Ball fallen, wird er zunächst gen Boden beschleunigen, um dann vom Boden abzuspringen.

Diese Seite hilft Dir, passende Übergangsfunktionen zu finden.

Open Source
Hilf dabei, diese Seite in Deine Sprache zu übersetzen
xt
easeInSine
xt
easeOutSine
xt
easeInOutSine
xt
easeInQuad
xt
easeOutQuad
xt
easeInOutQuad
xt
easeInCubic
xt
easeOutCubic
xt
easeInOutCubic
xt
easeInQuart
xt
easeOutQuart
xt
easeInOutQuart
xt
easeInQuint
xt
easeOutQuint
xt
easeInOutQuint
xt
easeInExpo
xt
easeOutExpo
xt
easeInOutExpo
xt
easeInCirc
xt
easeOutCirc
xt
easeInOutCirc
xt
easeInBack
xt
easeOutBack
xt
easeInOutBack
xt
easeInElastic
xt
easeOutElastic
xt
easeInOutElastic
xt
easeInBounce
xt
easeOutBounce
xt
easeInOutBounce

x
t
CSS
In CSS können Übergangfunktionen in den 'transition'- und 'animation'-Properties eingestellt werden.
.block {
	transition: transform 0.6s ;
}
Auf cubic-bezier.com bearbeiten.
In CSS kann diese Funktion via @keyframes implementiert werden:
Größe
Lade...
Position
Lade...
Transparenz
Lade...
PostCSS
In PostCSS lässt sich diese Übergangsfunktion weitaus einfacher nutzen. Das Plugin postcss-easings nutzt die Definitionen der Übergangsfunktionen dieser Seite.
.block {
	transition: transform 0.6s ;
}
Diese Deklaration wird später in die oben gezeigte umgewandelt.
Diese Funktion kann leider mit keinem PostCSS-Plugin gesetzt werden. Die Verwending von @keyframes ist jedoch möglich. Siehe oben.
Gradient
Mit postcss-easing-gradients ist es möglich, Gradienten darzustellen.
.block {
	background: linear-gradient(
		to bottom,
		#1473e6,
		,
		#247b5e
	);
}
Berechnungsfunktion
Untenstehend ist eine Beispielimplementierung dieser Übergangsfunktion in TypeScript dargestellt. Die Variable x repräsentiert den Fortschritt des Übergangs in den Grenzen von 0 (Start des Übergangs) bis 1 (Ende des Übergangs).
function (x: number): number {
}
Untenstehend ist eine Beispielimplementierung dieser Übergangsfunktion in TypeScript dargestellt. Die Variable x repräsentiert den Fortschritt des Übergangs in den Grenzen von 0 (Start des Übergangs) bis 1 (Ende des Übergangs).
function (x: number): number {
}
Animation mit dieser Funktion vergleichen für:
Diese Funktion:
Diese Funktion
Lineare Funktion:
Lineare Funktion