Как пользоваться: Генератор Cubic Bezier
- Перетаскивайте два фиолетовых маркера, чтобы изменить кривую, или введите четыре числа вручную.
- Нажмите Воспроизвести, чтобы сравнить свою кривую со стандартным easing, например
ease. - Для физического движения переключитесь на Spring или Bounce и настройте жёсткость, демпфирование или количество отскоков.
- Скопируйте значение для CSS, Tailwind, Web Animations API, Framer Motion или GSAP.
Что такое cubic-bezier easing?
Кривая easing сопоставляет время (ось x) с прогрессом (ось y). cubic-bezier(x1, y1, x2, y2) описывает эту кривую двумя контрольными точками; начальная (0,0) и конечная (1,1) точки зафиксированы. Кривые, которые быстро растут, ощущаются резкими (ease-out), кривые, начинающиеся плавно, — тяжёлыми (ease-in), а значения y больше 1 или меньше 0 дают перелёт для игривого эффекта «back». Значения x должны оставаться в диапазоне от 0 до 1.
Какой easing выбрать?
| Движение | Easing | Почему |
|---|---|---|
| Элемент появляется на экране | ease-out (например, cubic-bezier(.16,1,.3,1)) | Быстро входит, мягко останавливается |
| Элемент уходит | ease-in | Ускоряется при уходе |
| Движение внутри экрана | ease-in-out | Естественный старт и остановка |
| Игривый интерфейс, переключатели | back / spring | Небольшой перелёт делает интерфейс живым |
| Прогресс, спиннеры | linear | Постоянная скорость |
Пружины и отскоки с linear()
Cubic-bezier может выйти за пределы диапазона только один раз. Настоящие пружины колеблются несколько раз, а мяч отскакивает от пола многократно, для этого нужна функция CSS linear(): список значений прогресса, которые браузер соединяет прямыми линиями. Этот инструмент симулирует пружину (жёсткость, демпфирование, масса) или прыгающий мяч, дискретизирует движение в linear() и указывает длительность, за которую движение успокаивается. linear() работает в Chrome и Edge 113+, Firefox 112+ и Safari 17.2+; для старых браузеров используйте запасной вариант cubic-bezier.
Используйте свою кривую в генераторе CSS-анимаций или для загрузчиков в генераторе CSS-загрузчиков.
Также ищут как: css easing, cubic-bezier css, функции easing, css пружинная анимация, linear() easing, генератор easing, кривая безье css.
Инструменты, которые хорошо сочетаются с Генератор Cubic Bezier
- Генератор CSS @keyframes — Визуальный редактор для @keyframes.
- Генератор CSS-анимаций при наведении — Создавайте анимации при наведении для кнопок, карточек, ссылок и иконок.
- Калькулятор clamp() — Введите минимальный и максимальный размер и диапазон ширины экрана.
- Генератор CSS-градиентов — Создайте градиент визуально: перетаскивайте цветовые стопы, меняйте угол или тип, начните с готового пресета — и скопируйте готовый CSS с запасным сплошным цветом.
Часто задаваемые вопросы
Могут ли значения y быть больше 1 или меньше 0?
Как использовать cubic-bezier в Tailwind?
ease-[cubic-bezier(0.16,1,0.3,1)] или добавьте его в theme.extend.transitionTimingFunction. В панели результата показаны оба варианта.