Шпаргалка функцій пом`якшення (easing)

Функція пом`якшення (easing) визначає швидкість перетікання анімації, роблячи її більш реалістичною.

Реальні речі не починають рухатися миттєво та з постійною швидкістю. Відкриваючи ящик столу, ми спочатку прискорюємо його, а лише на другій половині шляху — гальмуємо. Коли щось падає, то спочатку воно прискорюється, а відбившись від підлоги — підстрибує вгору.

Цей сайт допоможе підібрати потрібну функцію пом`якшення.

Open Source
Перекладіть своєю мовою
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 {
}
Подивитись пом`якшення при зміні:
Вибрана функція:
Вибрана функція
Лінійна функція:
Лінійна функція