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

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

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

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

Open Source

Перекладіть своєю мовою

easeInSine

easeOutSine

easeInOutSine

easeInQuad

easeOutQuad

easeInOutQuad

easeInCubic

easeOutCubic

easeInOutCubic

easeInQuart

easeOutQuart

easeInOutQuart

easeInQuint

easeOutQuint

easeInOutQuint

easeInExpo

easeOutExpo

easeInOutExpo

easeInCirc

easeOutCirc

easeInOutCirc

easeInBack

easeOutBack

easeInOutBack

easeInElastic

easeOutElastic

easeInOutElastic

easeInBounce

easeOutBounce

easeInOutBounce

Всі функції

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 {

}

function (x: number): number {

}

Подивитись пом`якшення при зміні:

Вибрана функція:

Вибрана функція

Лінійна функція:

Лінійна функція