CSS Easing Functions

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.

Linear easing function

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

Cubic Bézier easing functions

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);
}

Step easing functions

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);
}