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

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

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

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

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

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

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

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

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

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

Elysia Tools

Навигация

Design

Визуализатор 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.

<div>Easing curve + live preview + copy-ready CSS.</div>

Ввод

Заполните нужные поля и запустите инструмент.

4 параметров

СодержимоеВставьте или введите основные значения.1

Ввод easingtextНеобязательно

НастройкиНастройте форматы, диапазоны, числа и режимы.3

ПресетselectНеобязательноДлительность (мс)numberНеобязательноЗадержка (мс)numberНеобязательно

Результат

Готово к запуску

После запуска здесь появятся файлы, текст, структурированные данные или потоковый вывод.

Примеры

Примеры для этого инструмента

Связано

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

С чем помогает этот инструмент

Запустить этот инструмент

Подготовленные примеры запуска

Ввод

Результат

Примеры для этого инструмента

Продолжить с похожими инструментами и темами

Подготовленные примеры запуска

Ввод

Результат

Узнайте, когда использовать этот инструмент, что он поддерживает и как его применяют пользователи.

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

Обзор

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

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

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

Примеры

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

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

FAQ

Примеры CSS-фреймворка Bulma

Примеры CSS Фреймворка Milligram

Примеры Tailwind CSS

Примеры Обработки Изображений Web Python

Конвертер цветовых пространств

Конвертер цвета CMYK

OKLCH Конвертер цветов

Генератор CSS Анимаций

Инструменты CSS: Авторинг, Макеты и Каскад

Инструменты перевода цветовых пространств для веба и печати

Генераторы CSS-эффектов, палитр и дизайн-токенов

Instrumenty audita web-dostupnosti i proverki chitaemyh cvetov