animation-timing-function
Воспроизводите анимацию с одинаковой скоростью от начала до конца:
div {
animation-timing-function: linear;
}
Попробуйте сами »
Определение animation-timing-function
CSS свойство animation-timing-function
определяет кривую скорости анимации.
Кривая скорости определяет время, используемое анимацией для перехода от одного набора стилей CSS к другому.
Кривая скорости используется для плавного внесения изменений.
Значение по умолчанию: | ease |
---|---|
Унаследовано: | no |
Анимируемый: | no. Читайте о animatable |
Версия: | CSS3 |
JavaScript синтаксис: | object.style.animationTimingFunction="linear" Попробуй |
Поддержка animation-timing-function
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
Цифры, за которыми следуют -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- |
Синтаксис animation-timing-function
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;
Функция синхронизации анимации использует математическую функцию, называемую кубической кривой Безье, для построения кривой скорости. Вы можете использовать свои собственные значения в этой функции или использовать одно из предопределенных значений:
Значения animation-timing-function
Значение | Описание | Воспроизведение |
---|---|---|
linear | Анимация имеет одинаковую скорость от начала до конца | Воспр. » |
ease | Значение по умолчанию. Анимация начинается медленно, затем быстро, а затем медленно заканчивается | Воспр. » |
ease-in | Анимация начинается медленно | Воспр. » |
ease-out | Анимация заканчивается медленно | Воспр. » |
ease-in-out | Анимация имеет как медленное начало, так и медленный конец | Воспр. » |
step-start | Эквивалентно шаг(1, start) | |
step-end | Эквивалентно шаг(1, end) | |
steps(int,start|end) | Определяет пошаговую функцию с двумя параметрами. Первый параметр определяет количество интервалов в функции. Оно должно быть положительным целым числом (больше 0). Вторым параметром, который является необязательным, является либо значение "start", либо "end", и указывает точку, в которой происходит изменение значений в пределах интервала. Если второй параметр опущен, ему присваивается значение "end". | |
cubic-bezier(n,n,n,n) | Определите свои собственные значения в функции cubic-bezier Возможными значениями являются числовые значения от 0 до 1 |
|
initial | Устанавливает для этого свойства значение по умолчанию. Читайте о initial | |
inherit | Наследует это свойство от своего родительского элемента. Читайте о inherit |
Совет: Попробуйте различные значения в разделе "Дополнительные примеры" ниже.
Примеры animation-timing-function
Чтобы лучше понять различные значения функции синхронизации;
Вот пять различных элементов <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);}
Попробуйте сами »
Страницы по теме animation-timing-function
CSS Учебник: CSS Анимация
HTML DOM справочник: animationTimingFunction свойство