Свойство transition-timing-function определяет кривую скорости для анимации перехода.
Кривая скорости определяет время анимации использующееся для перехода от одного набора стилей к другому. Данное свойство используется, чтобы сделать изменения плавными.
В этом свойстве используется математическая функция, называемая кубической кривой Безье, чтобы сделать кривую скорости. Вы можете использовать ваши собственные значения в этой функции, или использовать одно из предопределенных значений.
Можно через запятую указывать более одного значения. Каждое новое значение применяется к соответствующему свойству в том порядке, который определён в свойстве transition-property. Если список значений меньше, чем количество свойств в transition-property, значения для оставшихся свойств начнут применяться по второму кругу. Если список значений больше, чем указано свойств, то список просто усекается до нужного количества значений.
CSS синтаксис
Возможные значения
| Значение | Описание |
|---|---|
| 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;
}
