Шпаргалка по функциям плавности (easing)

Функция плавности (easing) определяет скорость течения анимации, делая её более реалистичной.

Объекты в реальной жизни не начинают двигаться мгновенно и с постоянной скоростью. Открывая ящик стола, мы в начале ускоряем его, а затем тормозим. Уроните что-нибудь на пол, оно сначало ускорится вниз, а затем отскочит вверх после удара об пол.

Этот сайт поможет подобрать нужную функцию плавности.

Открытый код
Help translate site to your language
xt
easeInSine
xt
easeOutSine
xt
easeInOutSine
xt
easeInQuad
xt
easeOutQuad
xt
easeInOutQuad
xt
easeInCubic
xt
easeOutCubic
xt
easeInOutCubic
xt
easeInQuart
xt
easeOutQuart
xt
easeInOutQuart
xt
easeInQuint
xt
easeOutQuint
xt
easeInOutQuint
xt
easeInExpo
xt
easeOutExpo
xt
easeInOutExpo
xt
easeInCirc
xt
easeOutCirc
xt
easeInOutCirc
xt
easeInBack
xt
easeOutBack
xt
easeInOutBack
xt
easeInElastic
xt
easeOutElastic
xt
easeInOutElastic
xt
easeInBounce
xt
easeOutBounce
xt
easeInOutBounce

x
t
CSS
В CSS свойства transition и animation позволяют указывать функцию плавности.
.block {
	transition: transform 0.6s ;
}
Редактировать на cubic-bezier.com.
В CSS эту функцию можно реализовать с помощью @keyframes:
Размер
Загрузка...
Положение
Загрузка...
Прозрачность
Загрузка...
PostCSS
В PostCSS функцию плавности описывать сильно проще. Есть плагин postcss-easings, который берёт информацию о переходе с этого сайта.
.block {
	transition: transform 0.6s ;
}
Эта декларация преобразуется в подобную, которая описана выше.
К сожалению, такую функцию плавности нельзя задать с помощью какого-либо плагина PostCSS. Это можно сделать с помощью @keyframes, смотрите выше.
Градиент
Нарисовать градиент возможно с помощью postcss-easing-gradients.
.block {
	background: linear-gradient(
		to bottom,
		#1473e6,
		,
		#247b5e
	);
}
Математическая функция
Ниже вы видите код функции перехода, написанный на TypeScript. Переменная x — это абсолютный прогресс анимации, где 0 (начало анимации) и 1 (конец анимации).
function (x: number): number {
}
Ниже вы видите код функции перехода, написанный на TypeScript. Переменная x — это абсолютный прогресс анимации, где 0 (начало анимации) и 1 (конец анимации).
function (x: number): number {
}
Проверить плавность на изменение:
Текущая функция:
Текущая функция
Линейная функция:
Линейная функция