Cubic Bezier Generator
Визуальный инструмент для создания идеальных таймингов в CSS анимациях. Настраивайте кривые ускорения, сравнивайте с пресетами и копируйте код в один клик.
Что такое 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
Симметричный разгон и торможение. Выглядит наиболее естественно для движения элементов интерфейса.
Часто задаваемые вопросы
Лиана Арифметова
Миссия: Демократизировать сложные расчеты. Превратить страх перед числами в ясность и контроль. Девиз: «Любая повторяющаяся задача заслуживает своего калькулятора».
Был ли этот калькулятор полезен?
Отказ от ответственности
Только для информационных целей. Все расчёты, результаты и данные, предоставляемые данным инструментом, носят исключительно ознакомительный и справочный характер. Они не являются профессиональной консультацией — медицинской, юридической, финансовой, инженерной или иной.
Точность результатов. Калькулятор основан на общепринятых формулах и методиках, однако фактические результаты могут отличаться в зависимости от индивидуальных условий, исходных данных и применяемых стандартов. Мы не гарантируем полноту, точность или актуальность приведённых расчётов.
Медицинские, финансовые и профессиональные решения должны приниматься исключительно на основании консультации с квалифицированными специалистами — врачом, финансовым советником, инженером или другим профессионалом в соответствующей области. Не используйте результаты данного инструмента как единственное основание для принятия важных решений.
Ограничение ответственности. Авторы и разработчики сервиса не несут никакой ответственности за прямой или косвенный ущерб, возникший в результате использования данных расчётов. Пользователь принимает на себя всю ответственность за интерпретацию и применение полученных результатов.
Похожие инструменты
Калькулятор планирования учёбы и подготовки к экзаменам
Планировщик подготовки к ЕГЭ/ОГЭ, Парето-анализ тем, матрица Эйзенхауэра для учёбы и расписание интервальных повторений по алгоритму SM-2.
Калькулятор напольного плинтуса
Расчёт погонных метров напольного плинтуса, уголков, соединителей, заглушек и крепежа. ПВХ, МДФ, дерево, полиуретан, алюминий.
Гидравлический калькулятор
Расход, потери напора, мощность насосов, профиль трубы и расчет утечек. Инженерный онлайн калькулятор.
Калькулятор мощности котла отопления
Расчёт мощности отопительного котла по площади дома, утеплению и климатическому району. Расход газа, электричества, пеллет.
Калькулятор грузоперевозки (вес/объем/стоимость)
Расчет стоимости доставки груза. Учитывает расстояние, вес, объем и дополнительные услуги (страховка, погрузка).
Калькулятор животноводства
Рассчитайте кормовую базу, продуктивность и экономику животноводческого хозяйства. КРС, свиньи, овцы. По нормам ВНИИ животноводства и Минсельхоза РФ.
Калькулятор выплат при рождении ребёнка
Расчёт всех выплат при рождении: единовременное пособие, декретные, материнский капитал, пособие по уходу до 1.5 лет, региональные выплаты.
Калькулятор NIHSS (инсульт)
Оценка тяжести ишемического инсульта по 11 категориям. Баллы от 0 до 42. Критерий для тромболизиса. Для неврологов.
Калькулятор кухни
Расчёт кухонного гарнитура: модули, столешница, фартук. Линейная, угловая, П-образная кухня. Стоимость в рублях.
Калькулятор хлебных единиц
Расчёт хлебных единиц (ХЕ) в продуктах для диабетиков. Таблица ХЕ, суточная норма.
Калькулятор энергопотребления ПК
Расчёт мощности блока питания и расхода электричества компьютера. Подбор БП по компонентам, расчёт стоимости электроэнергии в месяц и год.
Калькулятор момента затяжки болта
Расчёт момента затяжки по классу прочности, размеру и покрытию. Таблица стандартных моментов.
Калькулятор микологии
Скорость роста колоний грибов, подсчёт спор, МИК антимикотиков, микотоксины, биоэффективность грибоводства, определитель грибов.
Калькулятор сборки ПК — подбор комплектующих
Онлайн конфигуратор сборки компьютера: подбор комплектующих, проверка совместимости, расчёт стоимости и энергопотребления.
Калькулятор настольного тенниса: рейтинг, вращение, инвентарь
Калькулятор для настольного тенниса. Рейтинг Эло, скорость и вращение мяча, подбор ракетки и накладок, правила и размеры стола.