Главная » Анимация css » animation-timer-function цыклы анимации
149 0  

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
Линейная функция, анимация происходит равномерно на протяжении всего времени, без колебаний в скорости.


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

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).

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

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% или для ключевого кадра.


Оставить свой комментарий:

Опыт в веб разработке:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
1979
2020