Шпаргалка функций плавности (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 {
}
Проверить изинг на изменение:
Текущая функция:
Текущая функция
Линейная функция:
Линейная функция