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

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

Генератор CSS cubic-bezier — это бесплатный визуальный редактор функций плавности, используемых переходами и анимациями CSS, созданный для фронтенд-разработчиков и моушн-дизайнеров. В режиме cubic-bezier вы перетаскиваете две контрольные точки (или вводите их), чтобы задать кривую: значения x остаются в допустимом диапазоне 0–1, а значения y могут превышать 1 или опускаться ниже 0, создавая перелёт (overshoot) и упреждение (anticipation). Режим steps() охватывает ступенчатую синхронизацию с настраиваемым числом шагов и термином скачка — jump-start, jump-end, jump-none или jump-both, где step-start и step-end равны steps(1, …). Живой предпросмотр анимации проигрывает текущую плавность на прямоугольнике, который движется и масштабируется в течение заданной вами длительности; можно наложить любой пресет как призрачную кривую для сравнения и импортировать существующую строку cubic-bezier() или steps(). Скопируйте точное объявление для свойства transition-timing-function или animation-timing-function.

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

1. Выберите вверху режим cubic-bezier() или steps() либо откройте Настройки, чтобы начать с пресета вроде ease, ease-in-out или linear.
2. В режиме cubic-bezier перетащите два манипулятора на графике или введите точные значения x1, y1, x2 и y2; поднимите y выше 1 для перелёта.
3. В режиме steps() задайте число шагов и выберите термин скачка (jump-start, jump-end, jump-none или jump-both), чтобы нарисовать лесенку.
4. Нажмите Воспроизвести, чтобы запустить живую анимацию на движущемся и масштабирующемся прямоугольнике, и настройте длительность в секундах, чтобы почувствовать ритм.
5. Выберите кривую сравнения в Настройках, чтобы наложить пресет как призрак на том же графике, либо вставьте значение в Импорт и примените его.
6. Скопируйте сформированное значение cubic-bezier() или steps() в свойство 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.34, y1 1.56, x2 0.64, y2 1

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

режим steps, N 4, jump-end

steps(4, jump-end)

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

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

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

Для чего нужен режим steps()?

steps() перескакивает между фиксированным числом значений вместо плавной интерполяции — удобно для спрайтовых анимаций, тикающих счётчиков или покадровых эффектов. Задайте число шагов и термин скачка: jump-start, jump-end, jump-none или jump-both. step-start равен steps(1, jump-start), а step-end — steps(1, jump-end).

Как работает живой предпросмотр анимации?

Нажмите Воспроизвести, и прямоугольник движется по дорожке и масштабируется, используя вашу текущую плавность, повторяясь туда-обратно. Меняйте длительность в секундах, чтобы замедлить или ускорить; используется чистая CSS-анимация с вашим значением cubic-bezier() или steps() в качестве функции синхронизации.

Можно ли импортировать существующее значение плавности?

Да. Вставьте значение cubic-bezier(...) или steps(...) — либо ключевое слово вроде ease-in-out, step-start или step-end — в поле Импорт и примените его; редактор разберёт его обратно в контрольные точки или настройки шагов.

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

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