# Визуализатор CSS easing и анимации Визуализирует CSS-кривую cubic-bezier, показывает предпросмотр на позиции/прозрачности/масштабе, выбор пресетов и экспорт CSS > Каноническая страница: https://elysiatools.com/ru/tools/css-easing-visualizer - **Категория:** Design - **Ключевые слова:** easing, 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 использует Ньютона-Рафсона с запасной бисекцией для отображения время → прогресс как в браузерах. ## Входные данные - **Ввод easing** (text): cubic-bezier(0.34, 1.56, 0.64, 1) · ease-out · linear - **Пресет** (select) - **Длительность (мс)** (number) - **Задержка (мс)** (number) ## Когда использовать - При создании плавных переходов (transitions) и ключевых кадров (keyframes) для элементов интерфейса. - Для тонкой настройки эффектов отскока (bounce) с выходом за пределы диапазона 0 и 1. - При необходимости сравнить кастомную кривую Безье со стандартными пресетами браузера. ## Как это работает - Введите собственные координаты cubic-bezier или выберите один из готовых пресетов, таких как ease-out-back или snappy. - Укажите длительность и задержку анимации в миллисекундах для точной симуляции. - Изучите сгенерированный SVG-график кривой и оцените анимацию в реальном времени на трех демонстрационных блоках (translateX, opacity, scale). - Скопируйте автоматически созданный CSS-код для свойств transition или правил @keyframes. ## Сценарии использования - Разработка отзывчивых и живых эффектов наведения (hover) для кнопок и карточек. - Настройка плавного появления модальных окон и выпадающих меню с эффектом масштабирования. - Создание сложных анимаций загрузки с использованием ключевых кадров @keyframes. ## Частые вопросы ### Что такое cubic-bezier? Это математическая функция, определяющая скорость изменения анимации во времени с помощью четырех контрольных точек. ### Как работает предпросмотр анимации? Инструмент показывает три живых блока, которые двигаются (translateX), меняют прозрачность (opacity) и масштаб (scale) в соответствии с выбранной кривой. ### Что означают кривые с перелетом (y < 0 или y > 1)? Такие кривые создают эффект отскока или пружины, выходя за начальные или конечные границы анимации. ### В каких форматах можно экспортировать результат? Вы получаете готовый к копированию CSS-код для свойств transition и правил @keyframes. ### Как инструмент рассчитывает прогресс анимации? Он использует метод Ньютона-Рафсона с бисекцией для точного сопоставления времени и прогресса, аналогично современным браузерам. ## Связанные инструменты - [Конвертер цветовых пространств](https://elysiatools.com/ru/tools/color-space-converter): Конвертирует цвет между HEX, RGB, HSL, CIELAB и Display-P3 с CSS-выводом и проверкой гаммы. - [Конвертер цвета CMYK](https://elysiatools.com/ru/tools/cmyk-converter): Преобразует цвета между HEX, RGB, HSL и CMYK. - [OKLCH Конвертер цветов](https://elysiatools.com/ru/tools/oklch-color-converter): Двустороннее преобразование между HEX, RGB, HSL, OKLCH и Display-P3 по CSS Color 4, со значениями светроты/хромы/тона, проверкой гаммы sRGB и Display-P3 и предложением обрезки вне гаммы - [Генератор CSS Анимаций](https://elysiatools.com/ru/tools/animation-generator): Генерирует ключевые кадры и свойства CSS анимации - [Извлечение палитры по URL изображения](https://elysiatools.com/ru/tools/color-palette-extractor-from-image-url): Загружает удаленное изображение по URL, извлекает доминирующие цвета, экспортирует готовые для кода файлы палитры и показывает контраст - [Экстрактор токенов темы ECharts](https://elysiatools.com/ru/tools/echarts-theme-token-extractor): Извлекает дизайн-токены — цвета, числа, размеры шрифтов и строки — из JSON темы ECharts и экспортирует их прямо в вашу дизайн-систему. Вставьте объект темы (тот, что регистрируется и передаётся в echarts.init(dom, themeName)) — инструмент обойдёт каждый лист, пометит каждый цвет (с опциональной нормализацией имя/rgb → hex), числовой отступ, размер шрифта и строку, затем выдаст чистые CSS-переменные, конфиг theme.extend для Tailwind, tokens.json Style Dictionary или SCSS-переменные. Мост между темой визуализации ECharts и дизайн-токенами Figma/CSS/Tailwind без копирования каждого значения вручную. - [Генератор CSS-сниппетов: глассморфизм / неоморфизм](https://elysiatools.com/ru/tools/glassmorphism-css-snippet-builder): Сквозной генератор полного CSS-сниппета глассморфизма или неоморфизма: настройте размытие, насыщенность, непрозрачность оттенка, радиус, рамку, внешнюю тень и верхний блик; опционально — зернистая SVG feTurbulence-текстура и @supports-фолбэк; автоматически добавляется префикс -webkit-backdrop-filter (обязателен до Safari 18) и маппинг на классы Tailwind (с заметкой о различиях v3/v4), плюс живой предпросмотр карточки на градиентном фоне. - [Извлечение палитры из изображения](https://elysiatools.com/ru/tools/image-color-palette-extractor): Загружает изображение, извлекает доминирующие цвета и экспортирует токены для кода с проверкой контраста ## Примеры - [Примеры CSS-фреймворка Bulma](https://elysiatools.com/ru/samples/bulma): Примеры CSS-фреймворка Bulma, включая столбцы, компоненты, элементы управления формами, систему сетки и современные шаблоны дизайна на основе CSS - [Примеры CSS Фреймворка Milligram](https://elysiatools.com/ru/samples/milligram): Примеры CSS фреймворка Milligram, включая типографику, формы, сетки и компоненты - [Примеры Tailwind CSS](https://elysiatools.com/ru/samples/tailwind-css): Примеры Tailwind CSS - CSS-фреймворк с утилитарно-первым подходом, адаптивным дизайном, компонентами и пользовательской конфигурацией - [Примеры Обработки Изображений Web Python](https://elysiatools.com/ru/samples/web-image-processing-python): Примеры обработки изображений Web Python используя PIL/Pillow включая чтение, сохранение, изменение размера и преобразование формата ## Связанные материалы - [Работа с CSS: вёрстка и каскад](https://elysiatools.com/ru/hubs/css-authoring-layout-and-cascade-workflows): Создавайте и проверяйте CSS: форматирование, диагностика селекторов, адаптивные фрагменты, визуальные эффекты и рендер-проверки.