Генератор CSS cubic-bezier

Что такое Генератор CSS cubic-bezier?

Генератор CSS cubic-bezier — это бесплатный визуальный редактор функции синхронизации cubic-bezier(), используемой переходами и анимациями CSS, созданный для фронтенд-разработчиков и моушн-дизайнеров. Выберите пресет вроде ease, linear, ease-in, ease-out или ease-in-out либо настройте две контрольные точки самостоятельно: значения x ограничены допустимым диапазоном 0–1, тогда как значения y могут превышать 1 или опускаться ниже 0, создавая перелёт (overshoot) и упреждение (anticipation). Предпросмотр строит кривую на единичном квадрате, чтобы вы с первого взгляда видели ускорение и замедление, а точное объявление cubic-bezier(x1, y1, x2, y2) формируется для копирования. Используйте его всякий раз, когда встроенное ключевое слово кажется слишком общим, а вам нужно более резкое, пружинистое или плавное движение.

Как пользоваться Генератор CSS cubic-bezier

1. Откройте Настройки и выберите начальный пресет — ease, linear, ease-in, ease-out или ease-in-out — чтобы задать контрольные точки.
2. Перетаскивайте два круглых манипулятора на предпросмотре кривой, чтобы изменить плавность, или вводите точные значения в поля x1, y1, x2 и y2.
3. Держите x1 и x2 в пределах от 0 до 1; поднимите y1 или y2 выше 1 либо опустите ниже 0, чтобы добавить движению перелёт или упреждение.
4. Сравнивайте кривую с пунктирной линейной базовой линией, чтобы оценить, как плавность ускоряется и замедляется.
5. Скопируйте сформированное значение cubic-bezier() и вставьте его в свойство transition-timing-function или animation-timing-function.

Примеры

x1 0.25, y1 0.1, x2 0.25, y2 1

cubic-bezier(0.25, 0.1, 0.25, 1)

x1 0, y1 0, x2 0.58, y2 1

cubic-bezier(0, 0, 0.58, 1)

x1 0.34, y1 1.56, x2 0.64, y2 1

cubic-bezier(0.34, 1.56, 0.64, 1)

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

Что означают четыре числа cubic-bezier?

Это координаты двух контрольных точек: x1, y1 для первой точки и x2, y2 для второй. Кривая всегда начинается в (0,0) и заканчивается в (1,1); контрольные точки изгибают её между этими концами, что определяет, как анимируемое свойство ускоряется и замедляется во времени.

Почему нельзя задать x1 или x2 больше 1?

Спецификация CSS требует, чтобы координаты x (время) обеих контрольных точек оставались в диапазоне от 0 до 1, чтобы функция синхронизации оставалась корректным отображением прогресса в результат. Этот инструмент автоматически ограничивает поля x и манипуляторы перетаскивания этим диапазоном. Значения y, напротив, могут превышать 1 или опускаться ниже 0, создавая перелёт или упреждение.

Как создать пружинистую или упругую плавность?

Поднимите одно из значений y выше 1 (для перелёта в конце) или ниже 0 (для упреждения в начале). Например, cubic-bezier(0.34, 1.56, 0.64, 1) проскакивает мимо цели перед тем, как успокоиться, давая ощущение пружины без всякого JavaScript.

Где использовать сформированное значение?

Вставьте его как значение transition-timing-function или animation-timing-function — например, transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Оно заменяет ключевые слова вроде ease или ease-in-out вашей собственной кривой.

Отправляются ли мои данные на сервер?

Нет. Весь редактор работает в вашем браузере на JavaScript — контрольные точки и кривая вычисляются локально и никогда не загружаются на сервер, поэтому он работает приватно и даже офлайн после загрузки страницы.