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