calcal.ru
DevTools & CSS Utils

Cubic Bezier Generator

Визуальный инструмент для создания идеальных таймингов в CSS анимациях. Настраивайте кривые ускорения, сравнивайте с пресетами и копируйте код в один клик.

Загрузка редактора...
CSS3
Standard
100%
Browser Support
60fps
Smoothness
W3C
Compliant

Что такое Cubic Bezier в CSS?

В CSS свойствах transition и animation скорость изменения состояний редко бывает линейной. Чтобы интерфейс выглядел живым и естественным, элементы должны разгоняться и тормозить плавно.

Функция cubic-bezier(x1, y1, x2, y2) определяет кривую скорости анимации, используя математику кривых Безье.

Ось X (Время)

Всегда идет от 0 до 1. Представляет собой продолжительность вашей анимации (duration).

Ось Y (Прогресс)

Обычно от 0 до 1, но может выходить за пределы (!), создавая эффекты пружины (bouncing).

Как читать график?

  • 1Чем круче кривая, тем быстрее происходит изменение.
  • 2Если кривая становится горизонтальной, анимация временно замирает.
  • 3Если кривая уходит вниз (y < 0) или вверх (y > 1), происходит отскок назад или перелет вперед.

Следите за тем, какие свойства вы анимируете — это напрямую влияет на производительность страницы.

Стандартные значения

ease

0.25, 0.1, 0.25, 1.0

Значение по умолчанию. Анимация начинается медленно, разгоняется в середине и плавно замедляется в конце.

linear

0.0, 0.0, 1.0, 1.0

Равномерная скорость на всем протяжении. Полезна для спиннеров загрузки и изменения цвета.

ease-in-out

0.42, 0.0, 0.58, 1.0

Симметричный разгон и торможение. Выглядит наиболее естественно для движения элементов интерфейса.

Часто задаваемые вопросы

Стандартные функции (ease, linear) подходят для базовых задач, но они могут выглядеть скучно. Кастомные кривые позволяют добавить анимации характер: сделать её резкой, упругой или кинематографичной.
Для этого нужно вытянуть контрольные точки за пределы диапазона 0-1 по оси Y. Например, `cubic-bezier(0.175, 0.885, 0.32, 1.275)` создаст эффект перелета конечного значения и возврата назад.
Cubic-bezier поддерживается во всех современных браузерах и используется в свойствах `transition-timing-function` и `animation-timing-function`.
Практически нет. Браузеры оптимизируют вычисления кривых Безье. На производительность больше влияет то, КАКОЕ свойство вы анимируете (лучше анимировать opacity и transform, чем width или margin).
Лиана Арифметова
Создатель

Лиана Арифметова

Миссия: Демократизировать сложные расчеты. Превратить страх перед числами в ясность и контроль. Девиз: «Любая повторяющаяся задача заслуживает своего калькулятора».

Был ли этот калькулятор полезен?

⚖️

Отказ от ответственности

Только для информационных целей. Все расчёты, результаты и данные, предоставляемые данным инструментом, носят исключительно ознакомительный и справочный характер. Они не являются профессиональной консультацией — медицинской, юридической, финансовой, инженерной или иной.

Точность результатов. Калькулятор основан на общепринятых формулах и методиках, однако фактические результаты могут отличаться в зависимости от индивидуальных условий, исходных данных и применяемых стандартов. Мы не гарантируем полноту, точность или актуальность приведённых расчётов.

Медицинские, финансовые и профессиональные решения должны приниматься исключительно на основании консультации с квалифицированными специалистами — врачом, финансовым советником, инженером или другим профессионалом в соответствующей области. Не используйте результаты данного инструмента как единственное основание для принятия важных решений.

Ограничение ответственности. Авторы и разработчики сервиса не несут никакой ответственности за прямой или косвенный ущерб, возникший в результате использования данных расчётов. Пользователь принимает на себя всю ответственность за интерпретацию и применение полученных результатов.

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

🏗️

Калькулятор расхода материалов: краски, обоев, плитки

Строительный калькулятор расхода материалов. Расчет количества обоев, краски (литры), плитки, ламината и ковролина с учетом запаса.

⚗️

Калькулятор теории кристаллического поля

Расчёт ЭСКП, расщепление d-орбиталей в октаэдрическом и тетраэдрическом полях, высокоспиновые и низкоспиновые комплексы, магнитный момент.

🧮

Калькулятор коммунальных платежей ЖКХ

Рассчитайте коммунальные платежи: вода, электричество, газ, отопление, капремонт. Тарифы ЖКХ.

⚗️

Калькулятор энтальпии реакции (ΔH)

Стандартная энтальпия реакции, закон Гесса, тепловой эффект Q=nΔH, теплоёмкость. Таблица ΔHf.

🏠

Калькулятор загрузки грузовика и развесовки по осям

Рассчитайте нагрузки на оси и центр тяжести (CoG) грузовика. Визуализация расположения груза и проверка перегруза.

🧮

Калькулятор себестоимости изделия

Расчёт себестоимости: материалы, работа, накладные расходы. Наценка, маржа, рекомендуемая цена.

🧮

Калькулятор методологии исследований

Расчёт размера выборки, критерий хи-квадрат, корреляция Пирсона и мощность теста. Инструменты для научных и маркетинговых исследований.

🏥

Калькулятор степени потери слуха (PTA)

Расчёт степени тугоухости по аудиограмме. PTA, классификация ВОЗ, визуальная аудиограмма, бинауральная оценка.

🏗️

Калькулятор площади участка

Расчёт площади земельного участка любой формы: прямоугольник, треугольник, трапеция, Г-образный, неправильный многоугольник. Результат в м², сотках, гектарах. Конвертер единиц площади.

🏗️

Калькулятор шкафа-купе

Расчёт шкафа-купе: двери, профиль, ЛДСП, наполнение. Размеры, полки, штанги, ящики. Стоимость в рублях.

🏥

Калькулятор ИМТ

Узнайте свой Индекс массы тела (ИМТ) онлайн. Простой и точный расчет для мужчин и женщин.

🏗️

Калькулятор ремонта кухни

Расчёт стоимости ремонта кухни с мебелью и техникой. По регионам России.

🏗️

Калькулятор расхода обоев с учётом раппорта

Расчёт количества рулонов обоев с учётом подгонки рисунка (раппорта), смещения и отходов. Стандартные и широкие обои.

⚙️

Калькулятор умных сетей (Smart Grid)

Расчёты умных электросетей: нагрузка, счётчики, распределённая генерация, потери, надёжность

🧮

Калькулятор времени 3D-печати

Оценка времени 3D-печати по объёму, высоте слоя, скорости и заполнению. Расход электроэнергии.