Генератор cubic-bezier
Перетаскивайте две контрольные точки, чтобы задать кривую плавности CSS cubic-bezier(), просматривайте движение и копируйте функцию времени — всё в вашем браузере.
Генератор cubic-bezier работает целиком в вашем браузере. Кривая, которую вы перетаскиваете, предпросмотр анимации и сгенерированный CSS cubic-bezier() никогда не покидают ваше устройство, и ничего не загружается в ArrayKit.
Открыть форматировщик CSS
Об инструменте Генератор cubic-bezier
Генератор cubic-bezier позволяет задать кривую плавности CSS перетаскиванием её двух контрольных точек по живому графику, а затем копирует точную функцию времени cubic-bezier(x1, y1, x2, y2) для вашего перехода или анимации. Начните с именованных пресетов вроде ease, ease-in-out или упругого ease-out-back, затем тонко настройте рукоятки мышью или клавишами со стрелками. Анимированная точка проигрывает вашу кривую в реальном времени, чтобы вы почувствовали ускорение перед вставкой. Создан для фронтенд-разработчиков и дизайнеров, настраивающих движение для transition-timing-function или animation-timing-function без угадывания чисел. Всё отрисовывается на вашем устройстве — кривая, предпросмотр и сгенерированный CSS никогда не покидают ваш браузер.
Возможности
- Перетаскивайте две контрольные точки по живой кривой, чтобы задать плавность
- Именованные пресеты: linear, ease, ease-in, ease-out, ease-in-out и кривые back
- Анимированная точка и демо масштаба/прозрачности проигрывают кривую в реальном времени
- Копирует точное значение cubic-bezier() и готовое правило transition-timing-function
- Подстраивайте каждую рукоятку клавишами со стрелками для попиксельной точности
- Рукоятки перелёта позволяют строить упругие кривые ease-back с y за пределами 1
- Значения x автоматически ограничиваются диапазоном 0–1, требуемым CSS
- Распознаёт и помечает текущую кривую, когда она совпадает со стандартным пресетом
Как использовать Генератор cubic-bezier
- Выберите пресет вроде ease-in-out как отправную точку
- Перетащите любую контрольную точку, чтобы изменить кривую, или подстройте её стрелками
- Смотрите анимированный предпросмотр, чтобы почувствовать созданное ускорение
- Скопируйте значение cubic-bezier() или полное правило transition-timing-function
- Вставьте его в свою CSS-сокращённую запись transition или animation
Пример
Ввод
control point 1: 0.34, 1.56
control point 2: 0.64, 1
Результат
.card {
transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
Кривая ease-out-back перелетает за 1 для лёгкого отскока.
Частые ошибки и устранение неполадок
- Браузер игнорирует мой cubic-bezier() и откатывается к linear. — Оба значения x должны быть в пределах 0–1. Этот инструмент ограничивает их за вас, но набранный вручную x1 или x2 вне этого диапазона делает всё значение недействительным.
- Анимация выглядит жёсткой в начале и в конце. — Оттяните каждую рукоятку дальше от её конечной точки. Рукоятки близко к (0,0) и (1,1) едва изгибают кривую, поэтому движение остаётся почти линейным.
- Хочу отскок, но значение y возвращается назад. — Перетащите контрольную точку выше верха графика, чтобы её y ушёл за 1 (или ниже 0). Ограничен только x; именно перелёт по y создаёт предвосхищение и отскок.
- Мой пресет перестал распознаваться после перетаскивания рукоятки. — Любое изменение делает кривую пользовательской, поэтому метка пресета исчезает. Щёлкните чип пресета снова, чтобы вернуться к его точным значениям.
Часто задаваемые вопросы
- Что означают четыре числа в cubic-bezier()?
- Это координаты x и y двух контрольных точек: cubic-bezier(x1, y1, x2, y2). Начало и конец кривой зафиксированы в (0,0) и (1,1), а эти две рукоятки изгибают путь между ними, задавая, как ускоряется анимация.
- Почему значения x должны оставаться между 0 и 1?
- В CSS ось x — это прогресс анимации во времени, который движется только вперёд. Удержание x1 и x2 в диапазоне 0–1 гарантирует, что кривая представляет одно значение в каждый момент. y может выходить за этот диапазон, создавая перелёт или предвосхищение.
- Как сделать упругую плавность или плавность с перелётом?
- Задайте контрольной точке y больше 1 или меньше 0. Например, cubic-bezier(0.34, 1.56, 0.64, 1) перелетает за конец перед тем, как осесть, что читается как мягкий отскок. Перетащите рукоятку выше или ниже графика, чтобы сделать это.
- В чём разница между ease и ease-in-out?
- ease — это cubic-bezier(0.25, 0.1, 0.25, 1), стартует чуть быстрее, чем ease-in-out, который является cubic-bezier(0.42, 0, 0.58, 1) и симметричен. ease-in-out разгоняется и замедляется равномерно, тогда как ease слегка нагружает движение в начале.
- Можно ли использовать это значение и для animation-timing-function?
- Да. cubic-bezier() работает везде, где CSS принимает функцию плавности, включая transition-timing-function, animation-timing-function и слот времени в сокращённых записях transition и animation.
- Отправляет ли перетаскивание кривой что-либо на сервер?
- Нет. Редактор, анимированный предпросмотр и сгенерированный CSS вычисляются в вашем браузере обычным JavaScript. Ничто о вашей кривой не загружается в ArrayKit.
Связанные инструменты
Все инструменты ArrayKit