Easing Functions Cheat Sheet

Easing functions specify the rate of change of a parameter over time.

Objects in real life don’t just start and stop instantly, and almost never move at a constant speed. When we open a drawer, we first move it quickly, and slow it down as it comes out.

Open Source

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 easings

CSS

In CSS, the transition and animation properties allow you to specify an easing function.

.block {
	transition: transform 0.6s ;
}

Edit on cubic-bezier.com.

In CSS, this function can be implemented using @keyframes:

Size

Position

Transparency

PostCSS

In PostCSS, the easing function is much easier to describe. There is a plugin postcss-easings that takes the transition information from that site.

.block {
	transition: transform 0.6s ;
}

That declaration is converted to the one described above.

Unfortunately, the easing function cannot be set with any PostCSS plugin. Can be done with @keyframes, see above.

Gradient

It is possible to draw a gradient using postcss-easing-gradients.

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

Math function

Below you see the code of this easing function written in TypeScript. The variable x represents the absolute progress of the animation in the bounds of 0 (beginning of the animation) and 1 (end of animation).

function (x: number): number {

}

function (x: number): number {

}

Check easing for changes:

This function:

This function

Linear function:

Linear function