Шпаргалка функций плавности (easing)
Функция плавности (easing) определяет скорость течения анимации, делая её более реалистичной.
Реальные вещи не начинают двигаться мгновенно и с постоянной скоростью. Открывая ящик стола, мы в начале ускоряем его, а затем тормозим. При падении мячик постоянно ускоряется, а после удара об пол — слегка подпрыгивает.
Этот сайт поможет подобрать нужную функцию плавности.
Опенсорс
Help translate site to your language
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 {
}Проверить изинг на изменение:
Текущая функция:
Текущая функция
Линейная функция:
Линейная функция