Визуализатор CSS easing и анимации

Визуализирует CSS-кривую cubic-bezier, показывает предпросмотр на позиции/прозрачности/масштабе, выбор пресетов и экспорт CSS

Настраивайте тайминг CSS-анимации, видя кривую easing и живой предпросмотр одновременно.

Ввод:

  • Введите свой cubic-bezier(x1, y1, x2, y2), выберите именованный пресет (linear, ease, ease-in/out, ease-in/out-back, ease-in/out-expo, snappy…) или просто ключевое слово.
  • Задайте длительность (мс) и задержку (мс).

Отчёт показывает:

  • Кривую easing (прогресс vs время) как SVG, с двумя контрольными точками Bézier, на фоне пунктирной линейной ссылки. Кривые с перелётом (y<0 или y>1, как ease-out-back) помечаются — они дают отскок, но могут вызывать скачки вёрстки.
  • Три живых предпросмотра — translateX, opacity и scale — анимированные выбранным CSS easing, с кнопкой повтора.
  • CSS для копирования в форматах transition и @keyframes.

Решатель Bézier использует Ньютона-Рафсона с запасной бисекцией для отображения время → прогресс как в браузерах.

Примеры результатов

1 Примеры

Подобрать snappy ease-out-back для кнопки

Кривая ease-out-back с перелётом, предпросмотр и CSS.

Easing curve + live preview + copy-ready CSS.
Показать параметры ввода
{ "easing": "cubic-bezier(0.34, 1.56, 0.64, 1)", "preset": "ease-out-back", "duration": 600, "delay": 0 }

Ключевые факты

Категория
Дизайн и цвет
Типы входных данных
text, select, number
Тип результата
html
Покрытие примерами
4
API доступен
Yes

Обзор

Этот инструмент позволяет визуализировать кривые плавности CSS (easing) с помощью интерактивного графика cubic-bezier, настраивать параметры анимации и мгновенно просматривать результат на живых примерах смещения, прозрачности и масштабирования с последующим экспортом готового CSS-кода.

Когда использовать

  • •При создании плавных переходов (transitions) и ключевых кадров (keyframes) для элементов интерфейса.
  • •Для тонкой настройки эффектов отскока (bounce) с выходом за пределы диапазона 0 и 1.
  • •При необходимости сравнить кастомную кривую Безье со стандартными пресетами браузера.

Как это работает

  • •Введите собственные координаты cubic-bezier или выберите один из готовых пресетов, таких как ease-out-back или snappy.
  • •Укажите длительность и задержку анимации в миллисекундах для точной симуляции.
  • •Изучите сгенерированный SVG-график кривой и оцените анимацию в реальном времени на трех демонстрационных блоках (translateX, opacity, scale).
  • •Скопируйте автоматически созданный CSS-код для свойств transition или правил @keyframes.

Сценарии использования

Разработка отзывчивых и живых эффектов наведения (hover) для кнопок и карточек.
Настройка плавного появления модальных окон и выпадающих меню с эффектом масштабирования.
Создание сложных анимаций загрузки с использованием ключевых кадров @keyframes.

Примеры

1. Настройка эффекта отскока для кнопки

Фронтенд-разработчик
Контекст
Разработчик хочет добавить кнопке при наведении легкий эффект пружины (отскока), чтобы интерфейс выглядел более динамичным.
Проблема
Стандартные функции плавности не позволяют выйти за пределы конечной точки анимации.
Как использовать
Выберите пресет "ease-out-back" или введите cubic-bezier(0.34, 1.56, 0.64, 1), установите длительность 600 мс и оцените анимацию на превью.
Пример конфигурации
easing: "cubic-bezier(0.34, 1.56, 0.64, 1)", preset: "ease-out-back", duration: 600, delay: 0
Результат
Получен SVG-график с отмеченным перелетом и готовый CSS-код перехода с эффектом пружины.

2. Создание быстрого и резкого перехода для меню

UI-дизайнер
Контекст
Дизайнеру нужно настроить быстрое появление боковой панели (sidebar) без лишней инерции, но с мягким замедлением в конце.
Проблема
Стандартный ease-in-out кажется слишком медленным на старте и затянутым.
Как использовать
Выберите пресет "snappy" или введите кастомные координаты, задайте длительность 300 мс и проверьте анимацию translateX.
Пример конфигурации
easing: "cubic-bezier(0.19, 1, 0.22, 1)", preset: "snappy", duration: 300, delay: 0
Результат
Сгенерирован CSS-код для быстрого и четкого открытия панели с плавным финишем.

Проверить на примерах

design
Примеры CSS-фреймворка Bulma
Примеры CSS-фреймворка Bulma, включая столбцы, компоненты, элементы управления формами, систему сетки и современные шаблоны дизайна на основе CSS
title token css
sample
Примеры CSS Фреймворка Milligram
Примеры CSS фреймворка Milligram, включая типографику, формы, сетки и компоненты
title token css
sample
Примеры Tailwind CSS
Примеры Tailwind CSS - CSS-фреймворк с утилитарно-первым подходом, адаптивным дизайном, компонентами и пользовательской конфигурацией
title token css
sample
Примеры CSS-селекторов
Коллекция примеров CSS-селекторов для тестирования извлечения и анализа
title token css
sample

Связанные хабы

Инструменты перевода цветовых пространств для веба и печати
Подборка инструментов для перевода цветовых пространств между вебом и печатью в одном хабе.
Генераторы CSS-эффектов, палитр и дизайн-токенов
Подборка инструментов для CSS-визуальных эффектов, построения палитр и генерации дизайн-токенов в одном хабе.
Instrumenty audita web-dostupnosti i proverki chitaemyh cvetov
Proveryayte problemy WCAG, porjadok chteniya dlya screen reader, oshibki kontrasta, riski dlya narushenij cvetovogo zreniya i dostupnye cvetovye resheniya v odnom hube dlya web-accessibility workflow.
Инструменты цветового дизайна и преобразования цветовых пространств
Сравнивайте конвертеры цветов, генераторы палитр, инструменты гармонии, проверки доступности и утилиты настройки цвета в одном месте для дизайнеров и разработчиков.

FAQ

Что такое cubic-bezier?

Это математическая функция, определяющая скорость изменения анимации во времени с помощью четырех контрольных точек.

Как работает предпросмотр анимации?

Инструмент показывает три живых блока, которые двигаются (translateX), меняют прозрачность (opacity) и масштаб (scale) в соответствии с выбранной кривой.

Что означают кривые с перелетом (y < 0 или y > 1)?

Такие кривые создают эффект отскока или пружины, выходя за начальные или конечные границы анимации.

В каких форматах можно экспортировать результат?

Вы получаете готовый к копированию CSS-код для свойств transition и правил @keyframes.

Как инструмент рассчитывает прогресс анимации?

Он использует метод Ньютона-Рафсона с бисекцией для точного сопоставления времени и прогресса, аналогично современным браузерам.

Документация API

Конечная точка запроса

POST /ru/api/tools/css-easing-visualizer

Параметры запроса

Имя параметра Тип Обязательно Описание
easing text Нет -
preset select Нет -
duration number Нет -
delay number Нет -

Формат ответа

{
  "result": "
Processed HTML content
",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}
HTML: HTML

Документация MCP

Добавьте этот инструмент к конфигурации сервера MCP: 

{
  "mcpServers": {
    "elysiatools-css-easing-visualizer": {
      "name": "css-easing-visualizer",
      "description": "Визуализирует CSS-кривую cubic-bezier, показывает предпросмотр на позиции/прозрачности/масштабе, выбор пресетов и экспорт CSS",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=css-easing-visualizer",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Вы можете объединять несколько инструментов, например: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, максимум 20 инструментов.

Если вы столкнулись с проблемами, пожалуйста, свяжитесь с нами по адресу [email protected]