animation-timer-function цыклы анимации

CSS-свойство animation-timer-function устанавливает, как анимация продвигается в течение каждого цикла.

Синтаксис написания:

/* 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;

linear
Линейная функция, анимация происходит равномерно на протяжении всего времени, без колебаний в скорости.

функции Безье: - подробнее

ease
Функция по умолчанию, анимация начинается медленно, разгоняется быстро и замедляется в конце. Соответствует cubic-bezier(0.25,0.1,0.25,1).

ease-in
Анимация начинается медленно, а затем плавно ускоряется в конце. Соответствует cubic-bezier(0.42,0,1,1).

ease-out
Анимация начинается быстро и плавно замедляется в конце. Соответствует cubic-bezier(0,0,0.58,1).

ease-in-out
Анимация медленно начинается и медленно заканчивается. Соответствует cubic-bezier(0.42,0,0.58,1).

Пошаговые функци:

step-start
Задаёт пошаговую анимацию, разбивая анимацию на отрезки, изменения происходят в начале каждого шага. Вычисляется в steps(1, start).

step-end
Пошаговая анимация, изменения происходят в конце каждого шага. Вычисляется в steps(1, end).

steps (количество шагов, положение шага)
Ступенчатая временная функция, которая принимает два параметра. Первый параметр указывает количество интервалов в функции. Это должно быть положительное целое число больше 0, если вторым параметром не является jump-none — в этом случае оно должно быть положительным целым числом больше 1. Второй параметр, который является необязательным, указывает позицию шага — момент, в котором начинается анимация, используя одно из следующих значений:

jump-start — первый шаг происходит при значении 0
jump-end — последний шаг происходит при значении 1
jump-none — все шаги происходят в пределах диапазона (0, 1)
jump-both — первый шаг происходит при значении 0, последний — при значении 1
start — ведет себя как jump-start
end — ведет себя как jump-end

Со значением start анимация начинается в начале каждого шага, со значением end — в конце каждого шага с задержкой. Задержка вычисляется как результат деления времени анимации на количество шагов. Если второй параметр не указан, используется значение по умолчанию end.

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

Функция синхронизации ключевого кадра применяется на основе свойств к каждому свойству от ключевого кадра, для которого она указана, до следующего ключевого кадра, указывающего это свойство, или до конца анимации, если нет последующего ключевого кадра, указывающего это свойство. В результате, никогда не будет использоваться функция синхронизации времени, заданная для ключевого кадра 100% или для ключевого кадра.