timer-function - функция скорости анимации

Тип данных CSS timer-function обозначает математическую функцию, которая описывает, как быстро изменяются одномерные значения во время анимации. Это позволяет вам изменять скорость анимации в течение ее продолжительности.

«Плавные» функции синхронизации часто называют функциями замедления. Они соотносят временное отношение с выходным отношением, оба выражаются как <число> с. Для этих значений 0,0 представляет начальное состояние, а 1,0 представляет конечное состояние.

Возможные значения для cubic-bezier:

Самые популярные функции:

.ease {
   transition-timing-function: ease;
}
.easein {
   transition-timing-function: ease-in;
}
.easeout {
   transition-timing-function: ease-out;
}
.easeinout {
   transition-timing-function: ease-in-out;
}
.linear {
   transition-timing-function: linear;
}
.cb {
   transition-timing-function: cubic-bezier(0.2,-2,0.8,2);
}

(На этом сайте можно протестировать свои значения кривой)

easeinsine	cubic-bezier(0.47, 0, 0.745, 0.715)
easeoutsine	cubic-bezier(0.39, 0.575, 0.565, 1)
easeinoutsine	cubic-bezier(0.445, 0.05, 0.55, 0.95)
easeinquad	cubic-bezier(0.55, 0.085, 0.68, 0.53)
easeoutquad	cubic-bezier(0.25, 0.46, 0.45, 0.94)
easeinoutquad	cubic-bezier(0.455, 0.03, 0.515, 0.955)
easeincubic	cubic-bezier(0.55, 0.055, 0.675, 0.19)
easeoutcubic	cubic-bezier(0.215, 0.61, 0.355, 1)
easeinoutcubic	cubic-bezier(0.645, 0.045, 0.355, 1)
easeinquart	cubic-bezier(0.895, 0.03, 0.685, 0.22)
easeoutquart	cubic-bezier(0.165, 0.84, 0.44, 1)
easeinoutquart	cubic-bezier(0.77, 0, 0.175, 1)
easeinquint	cubic-bezier(0.755, 0.05, 0.855, 0.06)
easeoutquint	cubic-bezier(0.23, 1, 0.32, 1)
easeinoutquint	cubic-bezier(0.86, 0, 0.07, 1)
easeinexpo	cubic-bezier(0.95, 0.05, 0.795, 0.035)
easeoutexpo	cubic-bezier(0.19, 1, 0.22, 1)
easeinoutexpo	cubic-bezier(1, 0, 0, 1)
easeincirc	cubic-bezier(0.6, 0.04, 0.98, 0.335)
easeoutcirc	cubic-bezier(0.075, 0.82, 0.165, 1)
easeinoutcirc	cubic-bezier(0.785, 0.135, 0.15, 0.86)
easeinback	cubic-bezier(0.6, -0.28, 0.735, 0.045)
easeoutback	cubic-bezier(0.175, 0.885, 0.32, 1.275)
easeinoutback	cubic-bezier(0.68, -0.55, 0.265, 1.55)

 В зависимости от конкретной используемой функции вычисляемый выходной сигнал иногда может увеличиваться до 1,0 или менее 0,0 в течение анимации. Это заставляет анимацию идти дальше, чем конечное состояние, а затем возвращаться. Для некоторых свойств, таких как левый или правый, это создает своего рода «подпрыгивающий» эффект.

Однако некоторые свойства будут ограничивать вывод, если он выходит за пределы допустимого диапазона. Например, компонент цвета больше 255 или меньше 0 будет обрезан до ближайшего допустимого значения (255 и 0 соответственно). Некоторые кривые кубического Безье () демонстрируют это свойство.

Синтаксис:

cubic-bezier(x1, y1, x2, y2)

х1, у1, х2, у2
Значения <число>, представляющие абсциссы, и ординаты точек P1 и P2, определяющих кубическую кривую Безье. x1 и x2 должны находиться в диапазоне [0, 1], иначе значение недопустимо.

Пример записи с рисунком:

Анимация начинается медленно, а затем постепенно ускоряется до конца, после чего она резко останавливается.

cubic-bezier(0.42, 0.0, 1.0, 1.0)