Генератор Cubic Bezier
НовоеСоздайте кривую плавности CSS, перетаскивая контрольные точки, с предпросмотром.
Runs entirely in your browser. Nothing is uploaded.
Визуальный дизайн кривых CSS-easing
Этот генератор cubic-bezier превращает абстрактное значение cubic-bezier(x1, y1, x2, y2) во что-то осязаемое и видимое. Перетаскивайте два маркера контрольных точек на графике, чтобы задать кривую ускорения, наблюдайте живой предпросмотр с точно таким же таймингом, а затем скопируйте готовое значение для ваших CSS-переходов и анимаций. Это полноценный редактор кривых easing и визуализатор cubic-bezier в одном, работающий полностью в браузере — без установки, без аккаунта.
Каждая кривая проходит от (0,0) до (1,1). Горизонтальная ось — время, вертикальная — прогресс. Кривая, которая резко поднимается в начале, означает быстрый старт, а кривая, которая выравнивается ближе к концу, означает плавное завершение. Вводите точные числа в четыре поля, перетаскивайте маркеры или вставьте существующее значение cubic-bezier(), чтобы загрузить и подстроить его. Результат обновляется в реальном времени при каждом движении маркера.
30+ пресетов: ключевые слова CSS и именованные кривые easing
Панель пресетов объединяет то, что конкуренты обычно разделяют. Вы получаете пять ключевых слов CSS — linear, ease, ease-in, ease-out и ease-in-out — а также полный каталог именованных кривых easing, популяризованных easings.net: Sine, Quad, Cubic, Quart, Quint, Expo, Circ и Back, каждая в вариантах In, Out и In-Out. То есть easeInOutCubic, easeOutQuart, easeOutBack и остальные доступны одним кликом, уже преобразованные в значение css cubic-bezier.
Каждый пресет показывает миниатюру кривой, чтобы вы распознали её форму с первого взгляда, и сразу загружает её в редактор для тонкой настройки. Easings.net только перечисляет названия и показывает статичные изображения — редактировать или экспортировать там нельзя. cubic-bezier.com показывает пять ключевых слов CSS, но не полный набор Penner. Этот инструмент даёт и то и другое, с возможностью редактирования, в одном месте.
Выбег, отскок и антиципация
Значения y в cubic-bezier не ограничены диапазоном 0–1. Потяните маркер выше рамки, и анимация выйдет за цель, а потом вернётся — пружинистый эффект easeOutBack = cubic-bezier(0.34, 1.56, 0.64, 1). Потяните маркер ниже рамки, и элемент сначала отклонится назад, как разбег перед прыжком. График редактора выходит за пределы единичного прямоугольника, так что вы можете перетащить маркер в зону выбега и сразу увидеть результат.
В Chrome DevTools есть встроенный редактор cubic-bezier, но он фиксирует маркеры в рамке 0–1, поэтому там нельзя создать эффекты выбега или антиципации. Firefox DevTools имеет то же ограничение. Оба инструмента также лишены каталога именованных пресетов и возможностей экспорта, доступных здесь. Если вам нужен выбег, этот инструмент — один из немногих, кто действительно его поддерживает.
Сравнение с другими инструментами cubic-bezier
cubic-bezier.com Лии Веру — это эталонный инструмент, популяризовавший формат «перетащи и посмотри», и по сей день отлично подходит для быстрой генерации CSS-кривых. Но в нём нет экспорта GSAP, вывода функции easing для JavaScript, режима сравнения, библиотеки пресетов Penner, а интерфейс ломается на мобильных устройствах. Easings.net — это справочник только для чтения: выбираете именованную кривую и видите значения, но ни редактора, ни возможности что-то изменить нет.
Chrome и Firefox DevTools содержат лёгкий редактор cubic-bezier внутри инспектора браузера, что удобно, если вы и так работаете в DevTools. Недостаток: без открытых DevTools использовать нельзя, маркеры ограничены 0–1 (без выбега), экспорт кода GSAP или JS не предусмотрен, на мобильных вообще не работает. Генератор UtiloKit объединяет интерактивный редактор, библиотеку пресетов, инструмент сравнения и три формата экспорта на одной странице, которая работает на любом устройстве.
Живой предпросмотр и сравнение бок о бок
Нажмите «Воспроизвести» — демонстрационный элемент зациклится с вашей кривой, чтобы вы оценили движение, а не просто цифры. Переключайте демо между translate, scale и opacity и регулируйте длительность под вашу реальную анимацию. Включите Сравнить, чтобы поставить вторую кривую рядом с первой — идеально для выбора правильной функции времени перехода перед публикацией.
Ползунок длительности управляет скоростью предпросмотра от 200мс до 3 секунд, чтобы вы могли протестировать, как одна и та же кривая ощущается на разных скоростях. Предпросмотр в замедленном режиме нередко обнаруживает проблемы — например, рывок в начале — которые не заметны при 300мс. Большинство других инструментов, включая cubic-bezier.com, предлагают предпросмотр лишь на одной фиксированной скорости и не имеют режима сравнения.
Экспорт в CSS, GSAP и JavaScript — бесплатно
Скопируйте то, что нужно вашему стеку. Вкладка CSS даёт и однострочную запись transition, и полный блок анимации @keyframes. Вкладка GSAP выводит вызов CustomEase.create(), чтобы анимация GSAP точно соответствовала кривой. Вкладка JS генерирует независимую функцию easing javascript cubic-bezier — решатель Ньютона-Рафсона, который можно вставить в requestAnimationFrame или любой tween без зависимостей.
Нашли кривую, которая понравилась? Поделитесь ею. Инструмент кодирует четыре значения в URL страницы, поэтому ссылка воспроизводит ваш точный easing на любом устройстве. Всё работает в браузере — ничего не загружается, не сохраняется и не логируется. Полностью бесплатно, без регистрации.
Frequently asked questions
Что такое cubic-bezier в CSS?
cubic-bezier() — это функция плавности (тайминга), определяемая кривой Безье. Записывается как cubic-bezier(x1, y1, x2, y2) в transition-timing-function или animation-timing-function. Две контрольные точки изгибают кривую, заставляя анимацию ускоряться и замедляться вместо движения с постоянной скоростью. Например, cubic-bezier(0.25, 0.1, 0.25, 1) — это ровно то же самое, что ключевое слово CSS 'ease'.
Как работают четыре значения cubic-bezier?
cubic-bezier(x1, y1, x2, y2) задаёт две контрольные точки: P1 = (x1, y1) тянет начало кривой, P2 = (x2, y2) тянет конец. Сама кривая всегда начинается в (0,0) и заканчивается в (1,1). Значения x представляют время и должны оставаться в пределах 0–1; значения y представляют прогресс и могут опускаться ниже 0 или подниматься выше 1 для эффектов выбега. Перетащите два маркера на графике — все четыре числа обновляются в реальном времени.
В чём разница между ease, ease-in, ease-out и ease-in-out?
linear движется с постоянной скоростью без плавности — для большинства интерфейсов выглядит неестественно. ease — CSS-значение по умолчанию — начинается немного быстро, потом затухает. ease-in начинается медленно и разгоняется к концу, что часто напоминает падение. ease-out начинается быстро и тормозит — обычно выглядит наиболее естественно для элементов, появляющихся на экране. ease-in-out медленен на обоих концах и быстрее всего в середине — идеально для элементов, пересекающих экран и плавно останавливающихся.
Могут ли значения y cubic-bezier превышать 1 или быть ниже 0?
Значения y могут, и именно так получают эффекты выбега и антиципации. Значения x (время) всегда ограничены 0–1, но y выше 1 заставляет элемент выйти за цель и вернуться — как пружина — а y ниже 0 заставляет его сначала отклониться назад. Классический пример — easeOutBack = cubic-bezier(0.34, 1.56, 0.64, 1). Этот редактор позволяет перетаскивать маркеры за рамку 0–1 для создания таких эффектов.
Как использовать cubic-bezier в CSS-переходе или анимации?
Поместите его в слот функции тайминга. Для перехода: transition: transform 600ms cubic-bezier(0.33, 1, 0.68, 1);. Для анимации по ключевым кадрам: animation: slide 600ms cubic-bezier(0.33, 1, 0.68, 1) both;. Вкладка CSS в этом инструменте автоматически генерирует оба фрагмента с вашей текущей кривой и длительностью — просто скопируйте и вставьте в таблицу стилей.
Как преобразовать именованный easing вроде easeInOutQuad в cubic-bezier?
Загрузите из каталога пресетов — у кривых Penner / easings.net есть стандартные приближения cubic-bezier. Например: easeInOutQuad = cubic-bezier(0.45, 0, 0.55, 1), easeOutCubic = cubic-bezier(0.33, 1, 0.68, 1), easeInOutCubic = cubic-bezier(0.65, 0, 0.35, 1). Выберите именованную кривую из галереи и скопируйте значение прямо в CSS.
Этот генератор cubic-bezier бесплатный и приватный?
Полностью бесплатный, без регистрации, и ничего никуда не загружается. Редактор кривых, живой предпросмотр и экспорт CSS, GSAP и JavaScript работают локально в вашем браузере. Ничто из созданного вами не отправляется на сервер, так что ваша работа остаётся целиком на вашем устройстве. Можно также поделиться кривой по ссылке, в которой закодированы четыре значения — без аккаунта.
Related tools
Все инструменты
Новое Смешивание цветов
Смешивайте два цвета в любой пропорции и копируйте результат или любой шаг.
Новое Пипетка цвета с изображения
Выберите любой цвет с изображения и получите его доминирующую палитру в HEX, RGB и HSL.
Новое Pixel Art Maker
Draw pixel art on a customizable grid, pick colors, and export as PNG — in your browser.
Новое Color Token Generator
Generate a full design-token scale (50–950 shades) from a single base color — CSS, Tailwind or JSON.
Пипетка и конвертер цвета
Выбирайте цвет и конвертируйте между HEX, RGB, HSL и OKLCH.
Новое Проверка контраста цвета
Проверяйте контраст по WCAG AA/AAA между цветом текста и фоном.