Генератор кривых Безье: кастомные CSS-easing
Генератор кубических кривых Безье позволяет проектировать CSS-кривые easing, перетаскивая две контрольные точки или начиная с пресета вроде ease, ease-in-out или back. Задайте длительность, чтобы просмотреть анимацию вживую, затем скопируйте значение cubic-bezier() или готовый фрагмент CSS-перехода. Это делает настройку движения визуальнее, чем редактирование одних значений кривой.
Генератор кубических кривых Безье — это визуальный редактор для создания CSS-кривых easing. Вместо того чтобы выводить кривую из чисел, можно перетаскивать её две контрольные точки и видеть, как меняется движение. Выберите стандартный пресет вроде ease, ease-in-out или back, затем задайте длительность и смотрите живой предпросмотр анимации.
Кривая представлена как значение CSS cubic-bezier(), а инструмент также может предоставить готовый фрагмент перехода. Начните с одного из стандартных пресетов easing или настройте контрольные точки, чтобы сформировать пользовательскую кривую; настройка длительности управляет таймингом, используемым в предпросмотре. Скопируйте результат, подходящий вашей таблице стилей или workflow.
Значение cubic-bezier() описывает тайминг easing, а объявление CSS-перехода может включать это easing вместе с длительностью. Генератор предоставляет и значение кривой, и готовый фрагмент перехода, поэтому можно скопировать нужный уровень детализации CSS. Визуальный предпросмотр облегчает сравнение движения, чем редактирование значений кривой без видимого результата.
Генератор кубических кривых Безье работает полностью в вашем браузере. Ваш ввод обрабатывается на вашем устройстве и не загружается, не сохраняется и не отправляется на сервер. Он работает офлайн после загрузки страницы, а инструмент бесплатен.
Этот инструмент поможет разработчикам и DevOps-инженерам готовить значения easing для интерфейсов, тестов, фикстур или seed-данных. Изучаете ли вы, как работает CSS-easing, или дорабатываете существующее взаимодействие — можно настроить кривую, просмотреть её и скопировать результат.
Шаг 1: Выберите стандартный пресет easing, например ease, ease-in-out или back, чтобы начать с кривой.
Шаг 2: Перетащите две контрольные точки, чтобы визуально настроить кривую и сформировать нужное движение.
Шаг 3: Задайте длительность, затем смотрите живой предпросмотр, чтобы увидеть, как кривая анимируется.
Шаг 4: Скопируйте сгенерированное значение cubic-bezier() или готовый фрагмент CSS-перехода.
Пример использования: Создайте значение cubic-bezier() для тестовых случаев, фикстур или seed-данных, когда проекту нужна конкретная кривая easing.
Пример использования: Сгенерируйте пакет значений, когда нужно несколько кривых сразу, вместо придумывания каждого значения вручную.
Пример использования: Используйте действительно случайные значения вместо угадываний на клавиатуре, когда нужны рандомизированные данные кривой.
Пример использования: Настройте CSS-переход визуально, регулируя контрольные точки и просматривая, как ощущается движение.
Пример использования: Сравните стандартный пресет вроде ease или ease-in-out с настроенной кривой перед копированием её в таблицу стилей.
Пример использования: Задайте длительность и просмотрите анимацию, чтобы проверить тайминг взаимодействия интерфейса.