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
Симметричный разгон и торможение. Выглядит наиболее естественно для движения элементов интерфейса.
Часто задаваемые вопросы
Лиана Арифметова
Миссия: Демократизировать сложные расчеты. Превратить страх перед числами в ясность и контроль. Девиз: «Любая повторяющаяся задача заслуживает своего калькулятора».
Инструмент предоставляется "как есть". Используйте сгенерированный код в своих проектах без ограничений. Мы не несем ответственности за визуальные баги, вызванные экстремальными значениями кривых в старых версиях браузеров.