animation-timing-function

CSS свойство animation-timing-function задаёт как происходит анимация в течении длительности каждого цикла.

Достаточно удобно использовать сокращённое свойство animation для того, чтобы установить все свойства для анимации одновременно.

Синтаксис

/* Keyword values */
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: step-start;
animation-timing-function: step-end;

/* Function values */
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
animation-timing-function: steps(4, end);

/* Steps Function keywords */ 
animation-timing-function: steps(4, jump-start);
animation-timing-function: steps(10, jump-end);
animation-timing-function: steps(20, jump-none);
animation-timing-function: steps(5, jump-both);
animation-timing-function: steps(6, start);
animation-timing-function: steps(8, end);

/* Multiple animations */
animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);

/* Global values */
animation-timing-function: inherit;
animation-timing-function: initial;
animation-timing-function: unset;

Временные функции могут быть установлены в пользовательских keyframes'ах в правилах @keyframes. Если в keyframe'е значение animation-timing-function указано, соответствующее значение animation-timing-function от элемента к которому анимация применена используется для этого keyframe'а.

Значения

<timingfunction>
Каждый <timing-function> представляет функцию расчета времени для связи с соответствующим свойством animate, как определено в animation-property.

Формальный синтаксис

<timing-function>#

где
<timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function>

где
<cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)
<step-timing-function> = step-start | step-end | steps(<integer>[, <step-position>]?)

где
<step-position> = jump-start | jump-end | jump-none | jump-both | start | end

Примеры

См. CSS animations.

Спецификации

Спецификация Статус Комментарий
CSS Animations
Определение 'animation-timing-function' в этой спецификации.
Рабочий черновик Начальное определение

Совместимость с браузерами

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
animation-timing-functionChrome Полная поддержка 43
Полная поддержка 43
Полная поддержка 3
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Edge Полная поддержка 12
Полная поддержка 12
Полная поддержка 12
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Firefox Полная поддержка 16
Полная поддержка 16
Полная поддержка 49
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Полная поддержка 44
С префиксом Отключено
С префиксом Требует вендорный префикс: -webkit-
Отключено From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Полная поддержка 5
С префиксом
С префиксом Требует вендорный префикс: -moz-
IE Полная поддержка 10Opera Полная поддержка 30
Полная поддержка 30
Полная поддержка 15
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Нет поддержки 12.1 — 15
Нет поддержки 12 — 15
С префиксом
С префиксом Требует вендорный префикс: -o-
Safari Полная поддержка 9
Полная поддержка 9
Полная поддержка 4
С префиксом
С префиксом Требует вендорный префикс: -webkit-
WebView Android Полная поддержка 43
Полная поддержка 43
Полная поддержка ≤37
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Chrome Android Полная поддержка 43
Полная поддержка 43
Полная поддержка 18
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Firefox Android Полная поддержка 16
Полная поддержка 16
Полная поддержка 49
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Полная поддержка 44
С префиксом Отключено
С префиксом Требует вендорный префикс: -webkit-
Отключено From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Полная поддержка 5
С префиксом
С префиксом Требует вендорный префикс: -moz-
Opera Android Полная поддержка 30
Полная поддержка 30
Полная поддержка 14
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Нет поддержки 12.1 — 14
Нет поддержки 12 — 14
С префиксом
С префиксом Требует вендорный префикс: -o-
Safari iOS Полная поддержка 9
Полная поддержка 9
Полная поддержка 3.2
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Samsung Internet Android Полная поддержка 4.0
Полная поддержка 4.0
Полная поддержка Да
С префиксом
С префиксом Требует вендорный префикс: -webkit-
jump- keywords for steps()
Экспериментальная
Chrome Нет поддержки НетEdge Нет поддержки НетFirefox Полная поддержка 65IE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетFirefox Android Полная поддержка 65Opera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Пользователь должен сам включить эту возможность.
Пользователь должен сам включить эту возможность.
Требует вендорный префикс или другое имя для использования.
Требует вендорный префикс или другое имя для использования.

Смотрите также