Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

Описание

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

For keyframed animations, the timing function applies between keyframes rather than over the entire animation. In other words, the timing function is applied at the start of the keyframe and at the end of the keyframe.

An animation timing function defined within a keyframe block applies to that keyframe; otherwise. If no timing function is specified for the keyframe, the timing function specified for the overall animation is used.

It is often convenient to use the shorthand property animation to set all animation properties at once.

Начальное значениеease
Применяется квсе элементы, ::before и ::after псевдоэлементы
Наследуетсянет
Отображениевизуальный
Обработка значениякак указано
Animation typediscrete
Канонический порядокуникальный неоднозначный порядок, определённый формальной грамматикой

Синтаксис

/* Ключевые слова */
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;

/* Функции */
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
animation-timing-function: steps(4, end);

/* Несколько анимаций */
animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);

/* Глобальные значения */
animation-timing-function: inherited;
animation-timing-function: initial;
animation-timing-function: unset;

Значения

<timingfunction>
Each <timing-function> represents the timing function to link to the corresponding property to animate, as defined in animation-property.

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

<single-timing-function>#

где
<single-timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function> | <frames-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>[, [ start | end ] ]?)
<frames-timing-function> = frames(<integer>)

Примеры

См. CSS animations.

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

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

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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Базовая поддержка (Да)-webkit
43.0
5.0 (5.0)-moz
16.0 (16.0)
10 12 -o
12.10
4.0-webkit
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Базовая поддержка (Да)-webkit 5.0 (5.0)-moz
16.0 (16.0)
? 12-o (Да)-webkit ?

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

Метки документа и участники

Внесли вклад в эту страницу: owlblinked, andreww2012
Обновлялась последний раз: owlblinked,