Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://easings.net below:

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.

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:

PostCSS

In PostCSS, the easing function is much easier to describe. There is a plugin

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 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

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4