# Свойство animation-timing-function

Свойство `animation-timing-function` устанавливает скорость изменения (ускорение) анимации. Например, сначала медленно, потом быстро, потом медленно и т.д.

## Синтаксис

`селектор { animation-timing-function: значение; }`

## Значения

Значение | Описание
--- | ---
`ease` | Сначала медленно, потом быстро, в конце опять медленно.
`ease-in` | Начинается медленно и постепенно ускоряется.
`ease-out` | Начинается быстро и постепенно останавливается.
`ease-in-out` | Сначала медленно, потом быстро, в конце опять медленно. От ease отличается скоростью.
`linear` | Всегда одна и та же скорость.
`step-start` | Анимации нет, свойство сразу принимает окончательное значение.
`step-end` | Анимации нет, свойство ждет время, заданное в `animation-duraton`, а затем мгновенно принимает окончательное значение.
`steps` | Значение свойства изменяется скачками.
`cubic-bezier` | Кривая Безье, которая может задавать произвольную анимацию. См. генератор кривых Безье.

Значение по умолчанию: `ease`.

## Сравнение различных значений

Наведите мышкой на представленные ниже блоки, чтобы увидеть работу всех видов временных функций:

## Смотрите также

- свойство `animation`,
  представляющее собой свойство-сокращение для анимаций
- команду `@keyframes`,
  задающую ключевые кадры анимации
- плавные переходы `transition`, представляющие собой анимацию по наведению на элемент

←→
↑