Генератор кривой Cubic Bezier для анимации

Генератор кривой Cubic Bezier позволяет перетаскивать две контрольные точки для создания собственной кривой ускорения (Easing) анимации, с живым превью движущегося шарика, наглядно показывающим эффект кривой, а также с готовыми популярными пресетами (Ease, Ease In, Ease Out, Material Standard). После настройки остаётся скопировать готовый код cubic-bezier.

Дизайн и CSS Полностью работает в вашем браузере

Вся обработка происходит на вашем устройстве — ничего не отправляется на сервер.

Перетащите любую точку, чтобы изменить форму кривой сглаживания

Пресеты

Код CSS

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

Часто задаваемые вопросы

Нет, эта версия ограничена диапазоном 0-1 по обеим осям для упрощения перетаскивания точек — этого достаточно для большинства популярных кривых ускорения (Ease In/Out и Material Design), но эффекты отскока или перелёта (Bounce/Overshoot) не поддерживаются.

Продолжить с

Полностью локально

Генератор анимаций CSS (Keyframe Animation)

Визуально создайте анимацию CSS (появление, скольжение, увеличение, отскок, вращение, переворот) и получите готовый код @keyframes

Дизайн и CSSОткрыть инструмент

Полностью локально

Генератор clip-path для CSS

Выберите готовую форму (круг, треугольник, звезда, речевой пузырь...) и получите готовый код clip-path

Дизайн и CSSОткрыть инструмент

Полностью локально

Генератор макетов CSS Grid и Flexbox

Визуально создайте макет Grid или Flexbox с живым превью и получите готовый код CSS

Дизайн и CSSОткрыть инструмент

Полностью локально

Генератор теней CSS (Box Shadow)

Настройте тень элемента визуально и получите готовый код box-shadow

Дизайн и CSSОткрыть инструмент

Похожие инструменты

Полностью локально

Генератор эффекта матового стекла (Glassmorphism)

Визуально создайте карточку с эффектом матового стекла и получите готовый код CSS

Дизайн и CSSОткрыть инструмент

Полностью локально

Генератор макетов CSS Grid и Flexbox

Визуально создайте макет Grid или Flexbox с живым превью и получите готовый код CSS

Дизайн и CSSОткрыть инструмент

Полностью локально

Преобразование текста в рукописный почерк

Превратите набранный текст в изображение, выглядящее как написанное от руки на разлинованной бумаге, с несколькими стилями почерка

Дизайн и CSSОткрыть инструмент

Полностью локально

Генератор органических форм и фоновых узоров (SVG)

Сгенерируйте случайную органическую форму (Blob) или повторяющийся фоновый узор в формате SVG и скопируйте или скачайте его

Дизайн и CSSОткрыть инструмент

Полностью локально

Генератор анимаций CSS (Keyframe Animation)

Визуально создайте анимацию CSS (появление, скольжение, увеличение, отскок, вращение, переворот) и получите готовый код @keyframes

Дизайн и CSSОткрыть инструмент

Хотите попробовать Uddatak?

Просмотрите полную библиотеку инструментов и начните пользоваться тем, что нужно прямо сейчас — бесплатно, без регистрации.

Смотреть все инструменты