animation-timing-function

❮ Назад CSS Справочник Далее ❯

Пример

Воспроизводите анимацию с одинаковой скоростью от начала до конца:

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	Эквивалентно шаг(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);}

Попробуйте сами »