# The animation-timing-function property

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

## Syntax

`selector { animation-timing-function: value; }`

## Values

Value | Description
--- | ---
`ease` | First slowly, then fast, and finally slowly again.
`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 `animation-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`: `ease`.

## Comparison of different values

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

## See also

- the `animation` property
  that is a shorthand for animation
- the `@keyframes` at-rule
  that set keyframes for an animation
- a smooth `transition`, representing an animation when hovering over an element

← →
↑
en ru