The transition-timing-function property

The transition-timing-function property sets a speed of change (acceleration) of a smooth transition. For example, first slow, then fast, then slow, etc.

Syntax

cssselector {
  transition-timing-function: value;
}

Values

Value	Description
`ease`	First slowly, then fast, and then slowly again at the end.
`ease-in`	It starts slowly and gradually speeds up.
`ease-out`	It starts fast and gradually stops.
`ease-in-out`	First slowly, then fast, and then slowly again at the end. It differs from ease in speed.
`linear`	Always the same speed.
`step-start`	There is no animation, the property immediately takes its final value.
`step-end`	There is no animation, the property waits for the time specified in `transition-duraton`, and then immediately takes the final value.
`steps`	The property value changes in fits and starts.
`cubic-bezier`	A Bezier curve that can define arbitrary animation. See Bezier curve generator.

Default value: ease.

Comparison of different values

Hover the mouse over the blocks below to see all types of time functions in action:

Example

Hover the mouse over the block - it will smoothly change its width in 2 seconds. Since the value is set to ease-in, the animation will start slowly and gradually accelerate:

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  transition-timing-function: ease-in;
  transition-duration: 2s;
  transition-property: width;
  height: 50px;
  width: 100px;
}
#elem:hover {
  width: 400px;
}

Результат:

The transition-timing-function property

Syntax

Values

Comparison of different values

Example

See also