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. Drop something on the floor, and it will first accelerate downwards, and then bounce back up after hitting the floor.

This page helps you choose the right easing function.

Open Source
Help translate site to your language
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, the transition and animation properties allow you to specify an easing function.
.block {
	transition: transform 0.6s ;
}
In CSS, this function can be implemented using @keyframes:
Size
Loading...
Position
Loading...
Transparency
Loading...
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 {
}
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 {
}
Check easing for changes:
This function:
This function
Linear function:
Linear function