May 16, 2021•css

**CSS easing functions** are pure functions that describes the rate at which a numerical value changes used to describe how fast values change during animations or to control the rate of change of gradient interpolation.

In CSS, transition and animation properties allow you to pick the easing function. There are three types of easing function: linear, cubic Bézier, and step functions.

You can use predefined easy-to-remember keywords like `linear`

, `ease`

or `step-start`

or manually adjust any animations using 2 functions `cubic-bezier()`

and `steps()`

.

```
.example {
animation-timing-function: ease-in-out;
animation-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);
animation-timing-function: steps(4, end);
transition-timing-function: ease-in-out;
transition-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);
transition-timing-function: steps(4, jump-end);
}
```

It’s also recommended to check if the user has requested that the system minimize the amount of non-essential motion it uses with prefers-reduced-motion.

The syntax for the linear easing function is simply the `linear`

keyword. Equal to `cubic-bezier(0.0, 0.0, 1.0, 1.0)`

, transitions at an even speed.

```
.example {
animation-timing-function: linear;
}
```

A cubic Bézier easing function is a type of easing function defined by four real numbers that specify the two control points, P1 and P2, of a cubic Bézier curve whose end points P0 and P3 are fixed at (0, 0) and (1, 1) respectively. The x coordinates of P1 and P2 are restricted to the range [0, 1].

`ease`

: Equal to`cubic-bezier(0.25, 0.1, 0.25, 1.0)`

, the default value, increases in velocity towards the middle of the transition, slowing back down at the end.`ease-in`

: Equal to`cubic-bezier(0.42, 0, 1.0, 1.0)`

, starts off slowly, with the transition speed increasing until complete.`ease-out`

: Equal to`cubic-bezier(0, 0, 0.58, 1.0)`

, starts transitioning quickly, slowing down the transition continues.`ease-in-out`

: Equal to`cubic-bezier(0.42, 0, 0.58, 1.0)`

, starts transitioning slowly, speeds up, and then slows down again.`cubic-bezier(<number [0,1]>, <number>, <number [0,1]>, <number>)`

: An author defined cubic-Bezier curve, The four numbers specify points P1 and P2 of the curve as (x1, y1, x2, y2). Both x values must be in the range [0, 1] or the definition is invalid.

```
.example {
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: cubic-bezier(0.1, -0.6, 0.2, 0);
}
```

A step easing function is a type of easing function that divides the input time into a specified number of intervals that are equal in length. It is defined by a number of steps, and a step position.

`steps(number-of-steps, <step-position>)`

: Displays the transition along`number-of-steps`

stops along the transition, displaying each stop for equal lengths of time.`<step-position>`

is optional and can be one of following values:`jump-start`

,`jump-end`

,`jump-none`

,`jump-both`

,`start`

,`end`

.`step-start`

: Equal to`steps(1, jump-start)`

`step-end`

: Equal to`steps(1, jump-end)`

```
.example {
animation-timing-function: step-start;
animation-timing-function: step-end;
animation-timing-function: steps(1, end);
}
```