тк 3 июля праздник (в беларуси), буду не онлайн (по возможности буду отвечать)

Свойство 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 Значение свойства изменяется скачками. Применяется так: transition-timing-function: steps(число скачков, start | end). Разницу между start и end смотрите в примерах.
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,
    с помощью которого можно сделать анимацию