Генератор CSS Cubic Bezier
Керуйте двома маркерами для створення кривої плавности, порівнюйте рух точок наживо та копіюйте готове значення cubic-bezier().
cubic-bezier(0.25, 0.1, 0.25, 1)Крива будується безпосередньо у вашому браузері. Жодні параметри не завантажуються на BroBroGo.
Поширені запитання
Що означають два маркери та чотири числа?
Крива йде від нижнього лівого кута (старт) до верхнього правого (фініш), де час рухається зліва направо, а прогрес — знизу вгору. Два маркери — це опорні точки, які вигинають криву; кожен має координати X та Y, тому разом вони записуються як cubic-bezier(x1, y1, x2, y2). Координата X завжди залишається в межах від 0 до 1, тоді як Y може виходити за верхню або нижню межі, створюючи ефект виходу за рамки або відтягування назад перед фінішем.
Як використовувати отримане значення в CSS?
Скопіюйте значення cubic-bezier() та вставте його туди, де вказується функція розподілу часу: transition-timing-function, animation-timing-function або у скорочений запис, наприклад: transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Ключові слова ease, ease-in, ease-out та ease-in-out — це просто фіксовані криві cubic-bezier, тому вибір одного з цих пресетів покаже вам точне значення, що стоїть за ключовим словом.
Чи можна створити ефект відскоку або еластичності?
Не зовсім. Одинарна крива cubic-bezier може створювати ефекти випередження та виходу за межі (пресети «back» витягують один із маркерів за межі сітки саме для цього), але вона може рухатися лише в одному напрямку до стабілізації. Ефекти відскоку (bounce) або еластичності вимагають зміни напрямку руху кілька разів, що неможливо описати однією кривою; для цього потрібні CSS keyframes або функція linear() з багатьма точками зупину.