Пружинная анимация CSS

Пружинная анимация имитирует движение пружины: элемент может перелететь конечное положение и вернуться к нему с затухающими колебаниями. Настройте жёсткость, затухание и массу — генератор рассчитает длительность и готовый CSS с функцией linear().

Как пользоваться
  • Выберите готовую пружину: «Мягкая», «Упругая», «Колебания» или «Без перелёта».
  • При остальных неизменных настройках увеличение жёсткости ускоряет отклик, а увеличение массы замедляет его. Затухание подавляет колебания, но слишком большое значение замедляет подход к цели. Под ползунками показаны длительность, число точек и количество пересечений цели в расчётной модели.
  • Длительность рассчитывается автоматически: к её концу отклонение модели от цели остаётся меньше 0,1%. Её стоит использовать вместе с кривой: с другой длительностью колебания станут быстрее или медленнее задуманного.
  • Кнопка «Проиграть» запускает движение шарика с той же функцией и длительностью, что в CSS.
  • Скопируйте CSS и задайте элементу с классом box новое значение transform, например при наведении: сам по себе transition движение не запускает.

Как устроена функция linear()

linear() перечисляет значения прогресса и соединяет их отрезками: linear(0, 1.08 31%, 1) значит «к 31% времени пройти 108% пути, а к концу вернуться к 100%». Скорость постоянна между соседними точками и может меняться на их стыках. Генератор использует до 40 точек: при большом числе колебаний приближение становится грубее. Ключевое слово linear без скобок задаёт равномерное изменение и соответствует linear(0, 1).

Функция подходит для transition-timing-function и animation-timing-function и применяется в CSS-анимации отдельно между ключевыми кадрами соответствующего свойства. Подробнее о переходах — в статье «Переходные эффекты».

Если вам нужен разгон, торможение или одиночный перелёт, воспользуйтесь редактором cubic-bezier().

Параметры пружины

Настройте жёсткость, затухание и массу. Генератор приблизит движение пружины функцией linear() и рассчитает длительность. При большом числе колебаний ограничение в 40 точек снижает точность кривой.

Пружина

:root {
  --spring-easing: linear(0, 0.01 0.8%, 0.026 1.3%, 0.049 1.8%, 0.096 2.5%, 0.178 3.5%, 0.25 4.3%, 0.329 5%, 0.7 8.3%, 0.836 9.5%, 0.958 10.8%, 1.062 12%, 1.147 13.3%, 1.211 14.5%, 1.254 15.8%, 1.277 17%, 1.283 17.8%, 1.281 18.8%, 1.257 20.5%, 1.207 22.5%, 1.056 27.3%, 0.995 29.5%, 0.964 31%, 0.944 32.3%, 0.931 33.5%, 0.922 35%, 0.92 36.8%, 0.927 38.5%, 1.001 47.5%, 1.015 50%, 1.022 52.8%, 1.021 56.5%, 1 65.5%, 0.994 70.5%, 1.002 87.5%, 1);
  --spring-duration: 1.397s;
}

.box {
  transition: transform var(--spring-duration) var(--spring-easing);
}