Генератор 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 — контрольні точки та крива обчислюються локально й ніколи не вивантажуються на сервер, тож він працює приватно й навіть офлайн після завантаження сторінки.