CSS animation-timing-function Свойство
Пример
Воспроизведение анимации с одинаковой скоростью от начала до конца:
div {
animation-timing-function: linear;
}
Подробнее примеры ниже.
Определение и использование
animation-timing-function задает кривую скорости анимации.
Кривая скорости определяет время, которое анимация использует для изменения одного набора стилей CSS в другой.
Кривая скорости используется для плавного внесения изменений.
| Значение по умолчанию: | ease |
|---|---|
| Inherited: | no |
| Animatable: | no. Читайте о animatable |
| Version: | CSS3 |
| Синтаксис JavaScript: | object.style.animationTimingFunction="linear" |
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Номера следуют -webkit-, -moz-, or -o- Укажет первую версию, которая работала с префиксом.
| Свойство | |||||
|---|---|---|---|---|---|
| animation-timing-function | 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
Синтаксис 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 | Значение по умолчанию. Анимация имеет медленный запуск, а затем быстро, прежде чем она заканчивается медленно | |
| ease-in | Анимация имеет медленный запуск | |
| ease-out | Анимация имеет медленный конец | |
| ease-in-out | Анимация имеет медленный запуск и медленный конец | |
| step-start | Эквивалентно шагам (1, запуск) | |
| step-end | Эквивалентно шагам (1, конец) | |
| steps(int,start|end) | Задает функцию степпинга с двумя параметрами. Первый параметр указывает количество интервалов в функции. Оно должно быть положительным целым числом (больше 0). Второй параметр, который является необязательным, является либо значением "Start", либо "End", и указывает точку, в которой изменение значений происходит в интервале. Если второй параметр опущен, ему дается значение "End" | |
| cubic-bezier(n,n,n,n) | Определите собственные значения в функции кубической Безье Возможные значения — это числовые значения от 0 до 1 |
|
| initial | Присваивает этому свойству значение по умолчанию. (Читайте о initial) | |
| inherit | Наследует это свойство из родительского элемента. (Читайте о inherit) |
Совет: Попробуйте различные значения в разделе «Дополнительные примеры» ниже.
Другие примеры
Пример
Чтобы лучше понять различные значения функции времени;
Ниже приведены пять различных элементов <div> с пятью различными значениями:
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
Пример
То же, что и в приведенном выше примере, но кривые скорости определяются с помощью функции кубической Безье:
#div1 {animation-timing-function: cubic-bezier(0,0,1,1);}
#div2 {animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {animation-timing-function: cubic-bezier(0.42,0,0.58,1);}
Похожие страницы
CSS Справочник: CSS Анимация
HTML DOM Справочник: animationTimingFunction Свойство