CSS свойство animation-timing-function

Свойство animation-timing-function определяет кривую скорости для анимации.

Кривая скорости определяет время анимации использующееся для перехода от одного набора стилей к другому. Данное свойство используется, чтобы сделать изменения плавными.

В этом свойстве используется математическая функция, называемая кубической кривой Безье, чтобы сделать кривую скорости. Вы можете использовать ваши собственные значения в этой функции, или использовать одно из предопределенных значений.

CSS синтаксис

animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int, start | end) | cubic-bezier(n,n,n,n) | initial | inherit;

Возможные значения

ЗначениеОписание
linearСкорость анимации одинаковая от начала и до конца.
easeЗначение по умолчанию. Анимация начинается медленно, затем ускоряется и к концу движения опять замедляется. Аналогично cubic-bezier(0.25,0.1,0.25,1).
ease-inАнимация медленно начинается, к концу ускоряется. Аналогично cubic-bezier(0.42,0,1,1).
ease-outАнимация начинается быстро, к концу замедляется. Аналогично cubic-bezier(0,0,0.58,1).
ease-in-outАнимация начинается и заканчивается медленно. Аналогично cubic-bezier(0.42,0,0.58,1).
step-startКак таковой анимации нет. Стилевые свойства сразу же принимают конечное значение. Аналогично steps(1, start).
step-endКак таковой анимации нет. Стилевые свойства находятся в начальном значении заданное время, затем сразу же принимают конечное значение. Аналогично steps(1, end).
steps(int, start | end)Ступенчатая функция с двумя параметрами. Первый параметр определяет количество интервалов в функции. Это должно быть положительное целое число больше 0. Второй необязательный параметр - это либо ключевое слово "start", либо "end". Этот параметр определяет точку, где происходит изменение значения внутри интервала. Если второй параметр не используется, то его значением по умолчанию будет "end".
cubic-bezier(n,n,n,n)Пользовательское определение кривой скорости в функции кубической кривой Безье. Параметрами функции могут быть числовые значения в диапазоне от 0 до 1.
inheritЗначение наследуется от родительского элемента.
initialУстанавливает значение по умолчанию.

Пример использования

Устанавливаем одинаковую скорость проигрывания на протяжении всего цикла анимации


div {
    -webkit-animation-timing-function: linear; /* Safari 4.0 - 8.0 */
    animation-timing-function: linear;
}