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

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

## Синтаксис

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

## Значения

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

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

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

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

## Пример

Наведите мышкой на блок - он плавно изменит свою ширину за `2` секунды. Так как установлено значение `ease-in`, то анимация начнется медленно и будет постепенно ускорятся:

`<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-duration`,
  которое задает длительность плавного перехода
- свойство `transition-property`,
  которое задает имя свойства для плавного перехода
- свойство `transition-delay`,
  которое задает задержку перед плавным переходом
- свойство `transition`,
  которое является сокращением для плавного перехода
- свойство `animation`,
  с помощью которого можно сделать анимацию

← →
↑
en ru