СSS Свойство animation-timing-function
Пример
Воспроизведение анимации с одинаковой скоростью от начала до конца:
div {
animation-timing-function: linear;
}
Редактор кода »
Определение и использование
Свойство animation-timing-function задает кривую скорости анимации.
Кривая скорости определяет время, которое анимация использует для перехода от одного набора стилей CSS к другому.
Кривая скорости используется для плавного внесения изменений.
| Значение по умолчанию: | ease |
|---|---|
| Унаследованный: | no |
| Анимируемый: | no. Прочитать о Анимируемый |
| Версия: | CSS3 |
| JavaScript синтаксис: | object.style.animationTimingFunction="linear" Редактор кода |
Поддержка браузеров
Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Числа, за которыми следуют -webkit-, -moz-, или -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). Второй параметр, который является необязательным, является либо значением "начало", либо "конец" и указывает точку, в которой происходит изменение значений в пределах интервала. Если второй параметр опущен, то ему присваивается значение "end" | |
| cubic-bezier(n,n,n,n) | Определите свои собственные значения в функции cubic-bezier Возможными значениями являются числовые значения от 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;}
Редактор кода »
Пример
То же, что и в приведенном выше примере, но кривые скорости определяются с помощью функции cubic-bezier:
#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 Animations
HTML DOM Справочник: animationTimingFunction
