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

CSS позволяет задать не только длительность перехода, но и его скорость. Под скоростью в данной ситуации подразумевается своеобразный стиль хода анимации. Например, переход может начинаться медленно, затем ускоряться, а в конце снова замедляться. Также переход может быть ровным от начала до конца либо стартовать медленно и быстро завершаться. Именно этот «рисунок», характер движения определяется через CSS3-свойство transition-timing-function.

Новички иногда путаются в свойствах transition-duration и transition-timing-function, потому что на первый взгляд сложно понять разницу между длительностью и скоростью. Если дословно перевести названия этих свойств с английского, то duration переводится как «продолжительность», «длительность», а timing function — как «функция расчета времени». Рекомендуем ориентироваться на оригинальные названия свойств во избежание путаницы.

Свойство transition-timing-function устанавливает, как будет распределяться скорость движения анимации в течение ее длительности. Распределение скорости анимации происходит в рамках того интервала, который задан через transition-duration.

Значения transition-timing-function

Скорость анимации можно изобразить в виде математической функции, которая показывает характер ее движения от начальной точки с координатами 0.0, 0.0 до конечной точки с координатами 1.0, 1.0.

В качестве значений можно использовать как предустановленные функции, так и создавать свои. Список ключевых слов, принимаемых свойством transition-timing-function, следующий:

• ease (значение по умолчанию) — начало анимации медленное, к середине скорость повышается и в конце вновь снижается.

• ease-in — начало анимации медленное, к концу она ускоряется.

• ease-out — начало анимации быстрое, к концу она замедляется.

• ease-in-out — начало и конец анимации медленные.

• linear — скорость равномерная на протяжении всей анимации.

• step-start — переход от одного стиля к другому происходит моментально и резко (анимации нет).

• step-end — по истечении заданного времени происходит резкий переход от одного стиля к другому (без анимации).

• steps() — анимация происходит ступенчато. В скобках сначала указывается число шагов, за которые должен осуществиться переход от одного стиля к другому, после чего ставится запятая и указывается параметр start или end, от которого зависит, когда будет начинаться анимация — в начале первого шага или в конце. Пример записи:

  transition-timing-function: steps(10, start);

• cubic-bezier() — значение, позволяющее задать свою функцию движения в виде кубической кривой Безье. Кубическая кривая строится по четырем координатам, которые указываются в скобках в следующем порядке: (x1, y1, x2, y2), где x1 и y1 — это координаты первой точки, а x2 и y2 — координаты второй точки. Аргументы x1 и x2 всегда должны быть в диапазоне от 0 до 1. Многие разработчики для экономии времени создают такие функции на специально созданных для этого онлайн-сервисах с удобным графическим интерфейсом.

Ниже приведены наглядные примеры того, с какой скоростью совершается переход при разных значениях свойства transition-timing-function. Длительность перехода — 6 секунд. Наведите курсор на блок, чтобы запустить анимацию (работает во всех современных браузерах):
 

Нам осталось разобрать четвертое свойство группы transition — это свойство transition-delay для создания отложенной анимации.