← Все инструменты для текста

Генератор cubic bezier

Перетаскивайте кривую, чтобы настроить CSS easing, смотрите анимацию и копируйте функцию тайминга.

  • Бесплатно
  • Без регистрации
  • Работает на любом устройстве

Около Генератор cubic bezier

Перетаскивайте два управляющих маркера кривой Безье, чтобы создать собственное сглаживание для переходов и анимаций CSS, смотрите, как с ним анимируется мяч, и копируйте значение cubic-bezier(x1, y1, x2, y2). Значения x должны оставаться между 0 и 1, а y может выходить за пределы для эффекта отскока.

Как пользоваться инструментом «Генератор cubic bezier»

  1. Перетащите две ручки кривой, чтобы сформировать плавность.
  2. Нажмите «Воспроизвести», чтобы увидеть, как элемент движется с вашим таймингом.
  3. Скопируйте функцию cubic-bezier в свой transition или animation.

Чем полезен этот инструмент?

Другие названия

Частые вопросы

Что означают четыре числа cubic-bezier?

Это координаты x и y двух управляющих точек на кривой скорости. Более крутые участки означают более быстрое движение, более пологие — более медленное.

Может ли кривая выходить за рамку?

Вертикальные значения могут выходить за 0 и 1, создавая перелёт или отскок. Горизонтальные значения должны оставаться между 0 и 1.

Какая кривая кажется естественной для движения в интерфейсе?

Кривая в стиле ease-out, быстрая в начале и медленная в конце, ощущается отзывчивой для элементов, входящих на экран. Сначала попробуйте короткую длительность.

Инструмент «Генератор cubic bezier» бесплатный?

Да. Инструмент «Генератор cubic bezier» на Toolipedia бесплатный: без регистрации и водяных знаков.

Это безопасно?

Да. Все вычисления выполняются в браузере, и ничего из введённого не отправляется на наш сервер.

Работает ли это на телефоне?

Да. Работает в любом современном браузере на Android и iPhone, а также на планшетах и компьютерах. Ничего не нужно устанавливать.

Нужна ли учётная запись?

Нет. Просто откройте страницу и пользуйтесь. Ни регистрации, ни электронной почты не нужно.

Можно ли разместить Генератор cubic bezier на моём сайте?

Да. Нажмите кнопку «Встроить на свой сайт» под инструментом, чтобы скопировать короткий фрагмент кода и вставить его на страницу. Это бесплатно, аккаунт не нужен, и инструмент продолжает работать внутри вашей страницы.

Похожие инструменты