Easing Functions
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.CSSIn 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:SizePositionTransparencyPostCSSIn 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.block {
	background: linear-gradient(
		to bottom,
		#1473e6,
		,
		#247b5e
	);
}Math functionBelow 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 functionLinear function:Linear function