Визуализатор функций замедления
Визуализируйте, сравнивайте и создавайте функции смягчения CSS с помощью интерактивного редактора кривых SVG с кубической кривой Безье. Перетащите две контрольные точки (P1, P2) на кривую, чтобы создать собственное замедление, или выберите один из более чем 18 встроенных пресетов, включая замедление, отскок, эластичность, назад и подчеркнутую кривую Material Design. Сравните до 6 кривых замедления рядом в наложении сравнения, просмотрите движение с помощью анимированной точки и скопируйте готовый CSS для свойств перехода и анимации. Вся обработка выполняется локально в вашем браузере — совершенно бесплатно и без регистрации.
Control Points
transition: all 0.4s ease;
animation: myAnim 0.4s ease;
О функциях смягчения CSS
- Функции смягчения CSS контролируют скорость изменений во время анимации или перехода. Вместо скучной анимации с постоянной скоростью замедление делает движение более естественным — ускорение, замедление, подпрыгивание или превышение скорости. Наиболее распространенным типом является Cubase-Bezier(), определяемый двумя контрольными точками (P1, P2), которые формируют кривую от начала (0,0) до конца (1,1).
- Интерактивный редактор SVG позволяет перетаскивать две контрольные точки по координатной сетке. Ось X представляет время (от 0 % до 100 % продолжительности анимации), а ось Y – прогресс (от 0 % до 100 % от продолжительности изменения свойства). Форма кривой между этими точками определяет ослабление: крутые участки означают быстрые изменения, плоские участки означают медленные изменения.
- P1 (первая ручка) управляет начальным ускорением; P2 (вторая ручка) управляет окончательным замедлением. P1 в правом нижнем углу создает медленный старт с ускорением. P2 в правом верхнем углу создает быстрый старт с замедлением. Значения вне диапазона 0–1 (например, y1=-0,5) создают эффекты перерегулирования, такие как подпрыгивание или пружинение.
- Ослабление, продолжительность и задержка являются независимыми свойствами анимации. Длительность определяет продолжительность анимации. Задержка контролирует момент запуска. Ослабление контролирует темп движения в течение этого периода. Быстрая продолжительность с резким замедлением создает резкое, живое движение. Медленная продолжительность с плавным ослаблением создает плавные, элегантные переходы.
Часто задаваемые вопросы
Функция смягчения CSS определяет скорость изменения свойства с течением времени во время анимации или перехода. Вместо движения с постоянной скоростью замедление позволяет анимации ускоряться, замедляться, подпрыгивать или пролетать мимо. Самый распространенный тип — Cubase-bezier(), определяемый четырьмя значениями, представляющими две контрольные точки, которые формируют кривую замедления.
Кривая кубического Безье имеет четыре параметра: x1, y1, x2, y2. P1 (x1, y1) управляет запуском анимации — он определяет начальное ускорение. P2 (x2, y2) управляет тем, как заканчивается анимация — он определяет окончательное замедление. Обе точки расположены на координатной сетке, где X = время (от 0 до 1) и Y = прогресс (от 0 до 1).
Когда значение Y контрольной точки становится ниже 0 или выше 1, кривая выходит за пределы — это означает, что анимированное свойство временно выходит за пределы своего окончательного значения. Это создает эффект отскока и пружины. Например, Back In начинается с небольшого движения назад, а затем вперед.
Легкость начинается медленно и ускоряется — хорошо для элементов, выходящих на экран. Плавность начинается быстро и замедляется — хорошо для элементов, покидающих экран. Легкость сочетает в себе оба: плавное начало и плавный конец с более быстрой средней частью.
Используйте функцию Cubic-Bezier() в свойстве перехода или анимации: Четыре значения: x1, y1, x2, y2. Вы можете перетаскивать контрольные точки в этом инструменте, чтобы найти идеальную кривую и скопировать полученное значение CSS.
Для большинства взаимодействий пользовательского интерфейса (состояния наведения, модальные окна, всплывающие подсказки) рекомендуется использовать упрощение — объекты, которые запускаются быстро и замедляются, кажутся отзывчивыми и естественными. Для анимации входа используйте плавность выхода или подчеркнутую кривую Material Design. Избегайте линейного пользовательского интерфейса — он кажется роботизированным.
Да. Используйте произвольные значения: переход-[cubic-bezier(0.68,-0.55,0.27,1.55)] или добавьте собственные плавности в файл Tailwind.config.js в разделе theme.extend.transitionTimingFunction.
Да. Cubic-bezier() и смягчение ключевых слов (ease, Easy-in, Ease-out, Eeasy-in-Out, Linear) поддерживаются во всех современных браузерах. Steps() также широко поддерживается в Chrome, Firefox, Safari и Edge.