CSS <easing-function> Data Type

The CSS <easing-function> data type represents a mathematical function that controls how a value changes over time. Easing functions are commonly used with CSS transitions and animations to control acceleration, deceleration, constant motion, and stepped changes.

Syntax

An <easing-function> can use a linear, cubic Bézier, or step easing function:

<easing-function> = <linear-easing-function> | <cubic-bezier-easing-function> | <step-easing-function>

Common examples include:

linear
ease
ease-in
ease-out
ease-in-out
cubic-bezier(0.42, 0, 0.58, 1)
steps(4, end)

Linear Easing

The linear keyword produces a constant rate of change from the starting value to the ending value. The linear() function can define a more detailed piecewise linear easing curve using a series of output values and optional positions.

linear
linear(0, 0.25 25%, 1)

Cubic Bezier Easing

The cubic-bezier() function defines a smooth easing curve using four numeric values that specify two control points. It can be used to create custom acceleration and deceleration effects.

cubic-bezier(0.42, 0, 0.58, 1)

Several commonly used easing keywords are predefined cubic Bézier curves, including ease, ease-in, ease-out, and ease-in-out.

Step Easing

The steps() function divides a transition or animation into a specified number of discrete intervals instead of producing continuous movement.

steps(4, end)
steps(6, start)

The step-start and step-end keywords provide predefined one-step easing behavior.

Easing Keywords

Value	Description
`linear`	Changes at a constant rate from the starting value to the ending value.
`ease`	Starts slowly, accelerates, and then slows toward the end.
`ease-in`	Starts slowly and accelerates toward the end.
`ease-out`	Starts quickly and decelerates toward the end.
`ease-in-out`	Starts slowly, accelerates, and then slows again toward the end.
`step-start`	Changes to the ending state immediately at the start of the interval.
`step-end`	Maintains the starting state until the end of the interval.

<easing-function> Example

The following example applies different easing functions to elements that move when the container is hovered:

.ease {
  transition: transform 2s ease;
}
.linear {
  transition: transform 2s linear;
}
.example:hover .ease,
.example:hover .linear {
  transform: translateX(200px);
}

Browser Result

Hover over the area below to compare the easing functions.

ease

Box

linear

Box

Both elements take the same amount of time to travel the same distance, but their rates of change differ because each uses a different easing function.

The <easing-function> data type is used by properties that control the timing of transitions and animations:

Specifications

The <easing-function> data type is defined in the CSS Easing Functions Level 2 .

CSS <easing-function> Data Type