Cheat Sheet fir Easing-Funktiounen

Iwwergangsfunktiounen(engl. easing functions) bestëmmen den Taux vun der Ännerung vun engem Parameter iwwer Zäit.

An der Realitéit beweegen sech Objete seele ruckelzeg oder mat enger konstanter Geschwindegkeet. Wann mir een Tirang opmaachen, dann zeien mir fir d'éischt staark a bremsen eis Beweegung dann of. Loosse mir ee Ball falen, da beschleunegt dee fir d'éischt a Richtung Buedem fir da vum Buedem ofzesprangen.

Des Säit hëlleft Dir, eng passend Iwwergangsfunktioun ze fannen.

Open Source

Hëlleft dobäi dëse Site op Är Sprooch ze iwwersetzen

easeInSine

easeOutSine

easeInOutSine

easeInQuad

easeOutQuad

easeInOutQuad

easeInCubic

easeOutCubic

easeInOutCubic

easeInQuart

easeOutQuart

easeInOutQuart

easeInQuint

easeOutQuint

easeInOutQuint

easeInExpo

easeOutExpo

easeInOutExpo

easeInCirc

easeOutCirc

easeInOutCirc

easeInBack

easeOutBack

easeInOutBack

easeInElastic

easeOutElastic

easeInOutElastic

easeInBounce

easeOutBounce

easeInOutBounce

All Iwwergangsfunktiounen

CSS

An CSS kënnen Iwwergangsfunktiounen an den 'transition' an 'animation' Eegenschafte benotzt ginn.

.block {
	transition: transform 0.6s ;
}

Op cubic-bezier.com beaarbechten.

An CSS kann des Funktioun via @keyframes implementéiert ginn.:

Gréisst

Um Lueden...

Positioun

Um Lueden...

Transparenz

Um Lueden...

PostCSS

An PostCSS léisst sech des Iwwergangsfunktioun vill mei einfach notzen. De Plugin postcss-easings notzt d'Definitioun fir d'Iwwergangsfunktioun vun dëser Säit.

.block {
	transition: transform 0.6s ;
}

Dës Deklaratioun gëtt spéider an déi uewe gewisen ëmgewandelt.

Leider kann dës Funktioun mat kengem PostCSS Plugin agestallt ginn. D'Verwendung vun @keyframes , wei uewe gewisen, ass awer méiglech.

Gradient

Mat postcss-easing-gradients ass et méiglech Gradienten duerzestellen.

.block {
	background: linear-gradient(
		to bottom,
		#1473e6,
		,
		#247b5e
	);
}

Berechnungsfunktioun

Hei ënne gesitt Dir de Code vun dëser Iwwergangsfunktioun am TypeScript geschriwwen. D'Variabel x representéiert den absolutte Fortschrëtt vun der Animatioun an de Grenze vun 0 (Ufank vun der Animatioun) an 1 (Enn vun der Animatioun).

function (x: number): number {

}

function (x: number): number {

}

Animatioun mat dëser Funktioun vergläiche fir:

Des Funktioun:

Des Funktioun

Linear Funktioun:

Linear Funktioun