Генератор кривих cubic-bezier
Створюйте власну CSS-функцію часу cubic-bezier(), перетягуючи дві контрольні точки, перегляньте її наживо поруч із лінійним еталоном і скопіюйте готове значення.
Результат
Писати cubic-bezier(x1, y1, x2, y2) вручну й перезавантажувати сторінку, щоб перевірити відчуття, — повільний спосіб налаштувати анімацію. Цей генератор замикає цикл: тягніть будь-яку контрольну точку на кривій або вводьте точні числа в поля x1/y1/x2/y2 — і крива, рядок CSS для копіювання та живе прев'ю анімації оновлюються при кожній зміні, без збірки й перезавантаження.
Дві осі навмисно поводяться по-різному. x1 і x2 завжди лишаються між 0 і 1, бо саме цього вимагає специфікація CSS від функції часу cubic-bezier() — значення поза цим діапазоном просто недійсне. У y1 і y2 такого обмеження немає: потягніть точку вище верху блока чи нижче низу, і крива перелетить за старт або за кінець — саме так з однієї кривої easing будуються ефекти пружини й відскоку.
Побачити число — не те саме, що побачити рух, тож прев'ю запускає дві однакові кульки поруч у циклі: одна рухається за вашою кривою, інша — у простому лінійному темпі. Спостерігати за їхніми перегонами — найшвидший спосіб зрозуміти, чи справді крива easing дає бажане відчуття, ще до того, як вона потрапить у стиль. Пресет-сторінки — справжні числа за ключовим словом CSS ease-in-out, чесне наближення перельоту, яке дехто зве відскоком, і опублікована стандартна крива Material Design від Google — це готові відправні точки, а не порожні контрольні точки.
Усе працює локально у вашому браузері: без завантажень, без акаунта, без звернень до сервера, а генератор працює й офлайн після завантаження сторінки.