Генератор cubic-bezier
Создайте кривую анимации CSS, перетаскивая ручки, с анимированным предпросмотром.
- Мгновенно
- Бесплатно
- Приватно (обработка локально)
- Без регистрации
Нарисуйте кривую анимации
Перетаскивайте две ручки на графике, формируя easing, смотрите, как анимированный шар повторяет движение, и копируйте значение cubic-bezier() для CSS.
-
Начните с пресета
ease, ease-in-out, linear…
-
Настройте ручки
X = время (0–1), Y свободен для отскока.
-
Скопируйте CSS
Вставьте в transition или animation.
Пресеты CSS
| Имя | cubic-bezier |
|---|---|
| linear | (0, 0, 1, 1) |
| ease | (0.25, 0.1, 0.25, 1) |
| ease-in | (0.42, 0, 1, 1) |
| ease-out | (0, 0, 0.58, 1) |
| ease-in-out | (0.42, 0, 0.58, 1) |
X ограничен [0,1], Y может вылетать для отскоков. Предпросмотр через Web Animations API, всё локально.
Частые вопросы
Что такое кривая cubic-bezier?
Это функция времени, описывающая, как анимация разгоняется и замедляется. Задаётся двумя контрольными точками (x1, y1, x2, y2). В CSS: transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1).
Почему значения Y могут превышать 1?
X остаются между 0 и 1 (время), но Y могут выходить за [0,1], создавая отскок или перелёт (элемент уходит дальше и возвращается). Так получаются кривые «back» и упругие.
Как использовать в CSS?
Вставьте значение в transition: all 0.3s cubic-bezier(…) или в animation-timing-function. Анимированный предпросмотр показывает реальный результат до вставки.
Какие стандартные пресеты?
ease = cubic-bezier(0.25, 0.1, 0.25, 1), ease-in = (0.42, 0, 1, 1), ease-out = (0, 0, 0.58, 1), ease-in-out = (0.42, 0, 0.58, 1), linear = (0, 0, 1, 1). Начните с пресета и подстройте ручки.