Вы здесь

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

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

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

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

Можно через запятую указывать более одного значения. Каждое новое значение применяется к соответствующему свойству в том порядке, который определён в свойстве transition-property. Если список значений меньше, чем количество свойств в transition-property, значения для оставшихся свойств начнут применяться по второму кругу. Если список значений больше, чем указано свойств, то список просто усекается до нужного количества значений.

CSS синтаксис

transition-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 Скорость анимации одинаковая от начала и до конца. Аналогично cubic-bezier(0, 0, 1, 1).
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-transition-timing-function: linear; /* Safari и Chrome */
    transition-timing-function: linear;
}