Главная->CSS->transition-timing-function

transition-timing-function

15 Нояб 2019г. в 14:03

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

Пример

transition-timing-function: ease|ease-in|ease-out|ease-in-out|linear|step-start|step-end|steps|cubic-bezier

Аргументы

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).
linear - Одинаковая скорость от начала и до конца.
step-start - Как таковой анимации нет. Стилевые свойства сразу же принимают конечное значение.
step-end - Как таковой анимации нет. Стилевые свойства находятся в начальном значении заданное время, затем сразу же принимают конечное значение.
steps - Ступенчатая функция, имеющая заданное число шагов.
cubic-bezier - Задаёт функцию движения в виде кривой Безье.