В 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. | Пример
|