Генератор Cubic Bezier

Набирати cubic-bezier(x1, y1, x2, y2) вручну й перезавантажувати сторінку, щоб перевірити відчуття — це повільний спосіб налаштування анімації. Цей генератор замикає цикл: перетягніть будь-який маркер контрольної точки на кривій або введіть точні числа в поля x1/y1/x2/y2 — і крива, готовий рядок CSS для копіювання та живий попередній перегляд анімації оновлюються при кожній зміні без етапу збирання та перезавантаження.

Дві осі працюють по-різному з певною метою. x1 та x2 залишаються затисненими між 0 та 1, оскільки саме цього вимагає специфікація CSS від функції cubic-bezier() — значення за межами цього діапазону просто недійсне. y1 та y2 такого обмеження не мають: перетягніть маркер вище верху поля або нижче його низу — і крива вийде за межі початкової чи кінцевої точки, саме так створюються ефекти пружини та відскоку з однієї кривої плавності.

Бачити число — не те саме, що бачити рух, тому попередній перегляд запускає дві однакові кульки поруч у циклі: одна рухається за вашою власною кривою, інша — з постійною лінійною швидкістю. Спостерігати, як вони рухаються поруч — найшвидший спосіб зрозуміти, чи дійсно крива плавності створює те відчуття, якого ви прагнете, ще до того, як вона потрапить до таблиці стилів. Сторінки з пресетами — справжні числа за лаштунками CSS-значення ease-in-out, чесна апроксимація виходу за межі, яку дехто називає відскоком, і опублікована Google стандартна крива Material Design — це готові відправні точки, від яких можна відштовхнутися, а не починати з порожніх контрольних точок.

Усе працює локально у вашому браузері: без завантаження, без облікового запису, без звернень до сервера, а генератор продовжує працювати офлайн після завантаження сторінки.