Как работает генератор cubic-bezier кривых
Инструмент позволяет визуально создавать собственные cubic-bezier кривые для CSS-анимаций. Вы перемещаете контрольные точки на холсте, а параметры автоматически обновляются. Любое изменение сразу отображается на примере анимации — так вы видите, как новая кривая влияет на движение.
Получив нужный результат, скопируйте сгенерированную строку cubic-bezier() и вставьте её в ваш CSS-код. Все вычисления происходят прямо в браузере — ничего не передаётся на сервер и не сохраняется вне вашего устройства.
Особенности и ограничения
Редактор поддерживает изменение y-координат за пределы диапазона 0–1, что позволяет создавать сложные эффекты вроде overshoot или bounce. При этом x-координаты ограничены от 0 до 1, чтобы обеспечить корректное временное поведение анимации, как требуют спецификации CSS.
Инструмент работает только с cubic-bezier кривыми и не поддерживает генерацию других типов анимационных функций, таких как spring или step. Экспорт возможен только в формате CSS cubic-bezier(). Нет интеграции с внешними инструментами и поддержка drag-and-drop требуется для работы с кривой.
Выбор и применение кривых
Чтобы выбрать подходящую кривую, ориентируйтесь на тип анимации: для естественных интерфейсных переходов часто используют ease или ease-in-out; для сложных эффектов можно вручную настроить параметры и получить уникальное поведение.
Продолжительность анимаций для UI обычно варьируется от 150 до 500 мс, но оптимально настроить её под конкретный интерфейс. Анимацию в редакторе можно просматривать с разной продолжительностью, чтобы подобрать идеальный вариант перед использованием в проекте.
Часто задаваемые вопросы
Как выбрать подходящую cubic-bezier кривую для анимации?
Выбор зависит от задач анимации: для плавных интерфейсных переходов подойдут стандартные кривые, а для акцентных — можно отрегулировать overshoot. Пробуйте разные варианты в редакторе и просматривайте результат сразу.
Можно ли с помощью этого инструмента создать кривую с bounce или overshoot эффектом?
Да, можно изменять y-координаты за пределы 0–1, чтобы получить визуальный overshoot или bounce. Такие кривые подходят для динамичных анимаций и необычных эффектов.
Рекомендуется ли определённая длительность анимации для UI?
Для большинства интерфейсов оптимальная длительность — от 150 до 500 мс. Для сложных анимаций или акцентных эффектов можно использовать длиннее или короче по ситуации.
Передаёт ли этот инструмент мои данные на сервер или сохраняет мои кривые?
Нет, вся работа происходит только в вашем браузере. Данные никуда не загружаются и не сохраняются внешне — всё полностью приватно.
Можно ли использовать сгенерированную кривую во всех браузерах и CSS?
Да, cubic-bezier поддерживается всеми современными браузерами. Просто скопируйте строку из редактора и вставьте её в свой CSS.
Можно ли менять длительность анимации в предпросмотре?
Да, вы можете настроить длительность прямо в инструменте и посмотреть, как кривая проявит себя при разных скоростях анимации.
Что-то не так или есть идея? Сообщить