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

selector {
	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:

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

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

transition-timing-function property

Syntax

Values

Comparison of different values

Example

See also