Cubic-bezier: кривая плавности для CSS
Потяните за контрольные точки и получите свою cubic-bezier() для transition-timing-function или animation-timing-function.
Тяните точки P1 и P2 мышью — или впишите координаты ниже
Движение, масштаб и вращение с этой кривой — нажмите «играть» в шапке инструмента
transition: all 1s cubic-bezier(0.25, 0.10, 0.25, 1.00);
transition-all duration-[1000ms] ease-[cubic-bezier(0.25,_0.10,_0.25,_1.00)]
Библиотека кривых — кликните, чтобы загрузить в график
Что такое cubic-bezier
cubic-bezier(x1, y1, x2, y2) — функция плавности (easing) для transition-timing-function и animation-timing-function. Четыре числа — координаты двух контрольных точек кривой Безье, которая описывает скорость движения во времени: где анимация разгоняется, а где тормозит. Ключевые слова ease, ease-in, ease-out — просто готовые cubic-bezier с заранее подобранными числами.
Как пользоваться генератором
- Перетащите точки P1 и P2 на графике — или впишите координаты вручную.
- Нажмите «Воспроизвести», чтобы увидеть кривую в движении на трёх примерах.
- Настройте длительность анимации ползунком — форма кривой от неё не зависит.
- Скопируйте готовое значение CSS или Tailwind-класс одной кнопкой.
Готовые кривые и их числа
Стандартные ключевые слова — это конкретные cubic-bezier, только с именем вместо чисел.
| Ключевое слово | cubic-bezier() |
|---|---|
linear | cubic-bezier(0, 0, 1, 1) |
ease | cubic-bezier(0.25, 0.1, 0.25, 1) |
ease-in | cubic-bezier(0.42, 0, 1, 1) |
ease-out | cubic-bezier(0, 0, 0.58, 1) |
ease-in-out | cubic-bezier(0.42, 0, 0.58, 1) |
Как читать контрольные точки
P1 отвечает за начало движения, P2 — за конец. Чем дальше точка от своего края графика, тем резче эффект в этой части анимации. Координата X всегда лежит между 0 и 1 — это время, от начала до конца перехода. Координата Y может выходить за пределы 0–1: тогда элемент «перелетает» конечное значение и возвращается — получается эффект отскока, как в easeOutBack.
Какую кривую выбрать
Для интерфейсных переходов — открытие меню, появление модалки, наведение на кнопку — обычно нужен ease-out: движение начинается быстро и мягко останавливается, это ощущается отзывчивее, чем плавный разгон. Ease-in подходит, когда элемент уходит со экрана — исчезновение можно начать неспешно. Linear уместен только для механических процессов вроде прогресс-бара или бесконечного вращения — в остальных случаях он выглядит неестественно.
Собранную кривую можно сразу применить к анимации по кадрам в конструкторе CSS-анимаций или к тени, которая плавно нарастает при наведении, в генераторе теней box-shadow.
Похожие инструменты
Другие полезные инструменты из той же категории
Часто задаваемые вопросы
Это функция, которая описывает скорость анимации во времени. Она принимает четыре числа — координаты двух контрольных точек: cubic-bezier(0.4, 0, 0.2, 1). Именно она решает, разгоняется движение плавно или дёргается. Стандартные ease, ease-in, ease-out — просто готовые cubic-bezier с заранее заданными числами.
Linear идёт с постоянной скоростью — движение выглядит механическим. Ease-in начинается медленно и разгоняется, ease-out наоборот тормозит к концу, ease-in-out делает и то и другое. Ease — значение по умолчанию, чуть более резкое на старте, чем ease-in-out. Для интерфейса чаще всего нужен ease-out: элемент влетает быстро и мягко останавливается.
Точек две: первая (P1) задаёт разгон в начале, вторая (P2) — торможение в конце. Чем дальше точка от своего края, тем сильнее эффект. Значения по X всегда лежат в диапазоне от 0 до 1, а вот по Y могут выходить за пределы — так получают эффект «отскока», когда элемент чуть перелетает цель и возвращается.
В обоих. Для переходов это свойство transition-timing-function (или четвёртое значение в сокращённой записи transition), для анимаций — animation-timing-function. Синтаксис одинаковый: transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1).
Для эффекта отскока используйте значения за пределами диапазона 0-1, например cubic-bezier(0.68, -0.55, 0.265, 1.55). Отрицательные значения создают "провал" перед анимацией, значения больше 1 создают "перелёт".