Обратите внимание, что браузеры 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). | Пример
|