Свойство 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;
}
