Генератор кривых Cubic Bezier CSS

Что делает этот генератор cubic-bezier

Преобразует четыре числа контрольной точки в готовую функцию времени CSS cubic-bezier(x1, y1, x2, y2) — то же значение, которое вы передали бы в transition-timing-function или animation-timing-function — и рисует точную кривую, которую описывают эти числа, чтобы вы могли увидеть ослабление перед его использованием. Выберите одну из 29 названных предустановок (стандартные ключевые слова ease/ease-in/ease-out/ease-in-out/linear плюс более полные семейства Sine, Quad, Cubic, Quart, Quint, Expo, Circ и Back, которые были популяризованы на easings.net и используются во всём Material Design), или переключитесь на Пользовательское и установите свои X1/Y1/X2/Y2.

Как использовать

1. Выберите предустановку из раскрывающегося списка или выберите Пользовательское.
2. Если вы выбрали «Пользовательское», установите X1, Y1, X2 и Y2. X1 и X2 ограничены 0–1 (спецификация CSS требует этого); Y1 и Y2 могут быть любыми числами.
3. Скопируйте блок Код CSS — он включает декларации transition-timing-function/animation-timing-function и рабочий пример transition: на вашу выбранную продолжительность.
4. Проверьте предпросмотр кривой и таблицу Сведения о кривой, которая указывает, является ли ослабление стандартной кривой ослабления или кривой с перелётом.

Что действительно контролируют X1, Y1, X2, Y2?

Кривая cubic-bezier CSS всегда начинается в (0, 0) и заканчивается в (1, 1) — эти две точки зафиксированы спецификацией и не настраиваются. X1/Y1 и X2/Y2 — это две контрольные точки, которые оттягивают кривую между ними, так же как ручки на кривой безье в инструменте векторной графики. X представляет прогресс через продолжительность анимации (поэтому она должна оставаться между 0 и 1 — значение вне этого диапазона делает весь cubic-bezier() недопустимым CSS, и браузер его игнорирует). Y представляет прогресс через анимируемое свойство — и ему разрешено опускаться ниже 0 или превышать 1.

Почему предпросмотр кривой выходит за пределы коробки?

Всякий раз, когда Y1 или Y2 выходит за пределы 0–1, анимируемое значение кратко превышает свою цель или отступает назад перед стабилизацией — это точно то, для чего служат кривые, такие как ease-in-back (небольшое «ускорение» перед движением) или ease-out-back (небольшой перелёт перед стабилизацией). Это полностью допустимый CSS, а не ошибка; пунктирный опорный прямоугольник в предпросмотре просто делает это видимым. Кривая кубического безье всегда остаётся в форме, образованной её четырьмя точками, поэтому когда Y1 и Y2 находятся в пределах 0–1, вся кривая также гарантированно находится внутри — это случай «стандартной кривой ослабления», который сообщает таблица деталей.

Мои данные приватны?

Да. Всё — построение строки CSS и рисование предпросмотра SVG — работает полностью в вашем браузере. Ничего не загружается и не регистрируется.