Safari и Chrome поддерживают альтернативное свойство: "-webkit-animation-timing-function".
Примечание: не поддерживается в IE9 и более ранних версиях.
Свойство animation-timing-function определяет кривую скорости для анимации.
Кривая скорости определяет время анимации использующееся для перехода от одного набора стилей к другому. Данное свойство используется, чтобы сделать изменения плавными.
В этом свойстве используется математическая функция, называемая кубической кривой Безье, чтобы сделать кривую скорости. Вы можете использовать ваши собственные значения в этой функции, или использовать одно из предопределенных значений.
| Значение по умолчанию: |
ease |
| Наследуется: |
нет |
| Версия: |
CSS3 |
| Синтаксис JavaScript: |
object.style.animationTimingFunction="linear" |
| Значение |
Описание |
| linear |
Анимация проигрывается с одинаковой скоростью от начала до конца. |
| ease |
Анимация ускоряется к середине и замедляется к концу проигрывания. |
| ease-in |
Замедленная анимация на старте. |
| ease-out |
Анимация замедляется к концу. |
| ease-in-out |
Анимация замедленна вначале и в конце. |
| cubic-bezier(n,n,n,n) |
Определение ваших собственных значений в кубической функции Безье. Возможные числовые значение 0 и 1. |
Пример
|