01
Начните с подходящего пресета
Для появления элемента попробуйте ease-out, для смены состояния сравните ease и стандарт Material. Пресет устанавливает все четыре числа; после ручной правки в списке появляется свой вариант.
HTML, CSS и фронтенд-код
Генератор cubic-bezierПроверьте движение до копирования
Перетащите точки или задайте четыре числа, затем посмотрите движение и скопируйте CSS.
Генератор cubic-bezier
Входная кривая
Перетащите точки или двигайте их стрелками; Shift увеличивает шаг.
Результат CSS
cubic-bezier(0.25, 0.1, 0.25, 1)Предпросмотр движения
Кривая обрабатывается только в браузере и не отправляется на сервер.
Параметры
Пунктирная диагональ означает постоянную скорость.
Кривая обновлена.
Если переход кажется резким или медленным, изменять одну лишь длительность недостаточно. Генератор cubic-bezier показывает начало и конец ускорения через две контрольные точки. Выберите близкий пресет и подстройте кривую под свой элемент.
Можно вставить имеющуюся функцию cubic-bezier() и сохранить точность набранных чисел. Редактор кривых плавности показывает, как кривая Безье CSS отличается от линии постоянной скорости, и помогает заметить выход за цель до копирования.
Зачем нужен Генератор cubic-bezier?
Точки, числа и движение в браузере можно проверить вместе.
Перетаскивание связано с точными числами
Две контрольные точки и поля X1, Y1, X2, Y2 описывают одну кривую. Генератор cubic-bezier принимает готовую функцию из стилей и не обрезает введённые десятичные знаки до двух без вашего ведома.
Ошибка X не скрывает допустимый выход Y
По правилу CSS координаты X1 и X2 лежат в пределах 0–1, а Y может выйти за них. Генератор cubic-bezier останавливает перетаскивание X на границе, но сохраняет ошибочное набранное число для исправления. Y больше 1 остаётся допустимым.
Три проверки перед вставкой в стили
02
Отдельно настройте начало и конец
Первая точка сильнее влияет на старт, вторая — на остановку. При перетаскивании X упирается в границу; неверный X в поле остаётся и вызывает ошибку. Y может быть отрицательным или больше 1.
03
Запустите с реальной длительностью
Изначально предпросмотр рассчитан на 1000 мс и запускается только по кнопке. Длительность не добавляется в скопированную функцию. При отключённом автообновлении результат также создаётся по Ctrl/Cmd+Enter.
Настройка кривой, сравнение и вывод CSS
Четыре способа изменить одни точки
Перетаскивание, стрелки клавиатуры, числовые поля и импорт функции обновляют общие координаты. Дополнительная линейная линия показывает разницу между выбранным easing и равномерным движением.
Предпросмотр с реальной функцией браузера
Демонстрация использует полученный cubic-bezier() как CSS-функцию времени. Она не выдаёт внутренний параметр кривой за прошедшее время и не запускается бесконечно сама.
Два варианта копирования
Можно взять одну функцию или полное объявление transition-timing-function. После изменения поля либо опции старый результат считается устаревшим, и копирование выключается до обновления.
Допустимые координаты и границы одного сегмента
- X ограничен, Y может выйти за рамки
- X1 и X2 должны находиться от 0 до 1. При перетаскивании точка останавливается; неверный X после ручного ввода или импорта остаётся видимым с ошибкой поля. Отрицательный Y и Y больше 1 разрешены в CSS.
- Одна кривая не заменяет пружину
- Один cubic-bezier() может дать отвод назад или разовое превышение цели. Несколько отскоков, физическая пружина и последовательность @keyframes требуют другого способа описания.
- Длительность нужна лишь для просмотра
- Введите положительное конечное число миллисекунд. Оно не меняет четыре координаты и не попадает в скопированную функцию; воспроизведение не повторяется автоматически.
- Вывод только для CSS easing
- Страница не читает целую таблицу стилей, файлы и URL, не хранит библиотеку пресетов и не выдаёт Tailwind, GSAP, JavaScript или готовые keyframes.
Вопросы о Генератор cubic-bezier
Что означают четыре числа в cubic-bezier()?
Это координаты X1, Y1, X2 и Y2 двух контрольных точек. Начало (0,0) и конец (1,1) закреплены. X соответствует времени, а Y — достигнутому прогрессу.
Почему значения x должны оставаться между 0 и 1?
X выражает ход времени внутри сегмента. Синтаксис CSS ограничивает обе X-координаты этим интервалом. Ошибочное введённое значение будет показано, а не автоматически обрезано.
Как сделать упругую плавность или плавность с перелётом?
Поднимите Y2 выше 1 либо выберите пресет разового превышения. Движение пройдёт мимо цели и вернётся. Для повторных отскоков нужны keyframes или модель пружины.
В чём разница между ease и ease-in-out?
ease меняет скорость в начале и конце несимметрично. ease-in-out даёт более сбалансированное ускорение и замедление, полезное для движения туда и обратно. Сравните их при одной длительности.
Можно ли использовать это значение и для animation-timing-function?
Да. Вставьте функцию в animation-timing-function или сокращённую запись animation. Кадры, длительность и повторения вы задаёте отдельно в своём CSS.
Остался вопрос?
Проверьте переход в Генератор cubic-bezier
Загрузите имеющуюся функцию, воспроизведите её с нужной длительностью и скопируйте корректный CSS. Генератор cubic-bezier показывает точки и числа на каждом шаге настройки.