What do the ease in and ease out options do?

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

CSS Transitions

CSS transitions allows you to change property values smoothly, over a given duration.

Mouse over the element below to see a CSS transition effect:

In this chapter you will learn about the following properties:

• transition
• transition-delay
• transition-duration
• transition-property
• transition-timing-function

Browser Support for Transitions

The numbers in the table specify the first browser version that fully supports the property.

How to Use CSS Transitions?

To create a transition effect, you must specify two things:

• the CSS property you want to add an effect to
• the duration of the effect

Note: If the duration part is not specified, the transition will have no effect, because the default value is 0.

The following example shows a 100px * 100px red