Свойство animation-timing-function CSS

Определение и использование

animation-timing-function Определяет кривую скорости анимации.

Кривые скорости определяют время, за которое анимация переходит от одного набора CSS стилей к другому.

Кривые скорости используются для сглаживания изменений.

См. также:

Урок CSS3:Анимации CSS

Руководство HTML DOM:Свойство animationTimingFunction

Пример

Пример 1

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

div
{
animation-timing-function:2s;
}

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

Пример 2

Чтобы лучше понять различные значения定时 функций, здесь представлены пять различных 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;}

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

Пример 3

Как и в предыдущем примере, но с помощью функции 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

animation-timing-function: value;

Атрибут animation-timing-function использует математическую функцию cubic-bezier для создания кривой скорости. Вы можете использовать свои значения или предопределенные значения:

Значение Описание Тест
linear Скорость анимации одинакова от начала до конца. Тест
ease По умолчанию. Анимация начинается медленно, затем ускоряется, и замедляется перед завершением. Тест
ease-in Анимация начинается медленно. Тест
ease-out Анимация заканчивается медленно. Тест
ease-in-out Анимация начинается и заканчивается медленно. Тест
cubic-bezier(n,n,n,n) Свои значения в функции cubic-bezier. Возможные значения - числовые значения от 0 до 1.

Совет:Попробуйте использовать различные значения в функции "Пробуйте сами" внизу.

Технические детали

Значение по умолчанию: ease
Ингеритация: нет
Версия: CSS3
JavaScript синтаксис: object.style.animationTimingFunction="linear"

Поддержка браузеров

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает этот атрибут.

Числа с префиксами -webkit-, -moz- или -o- указывают на первую версию использования префикса.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
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-