CSS cubic-bezier генератор

Перетащите две ручки, чтобы сформировать кривую плавности, выберите пресет и нажмите «Играть», чтобы почувствовать тайминг. Скопируйте готовое значение cubic-bezier() — всё обновляется в реальном времени в браузере.

Пресеты

Предпросмотр анимации

Длительность1.0s

Анимировать

Значение cubic-bezier

Всё работает в вашем браузере. Никаких загрузок и регистраций.

Как это работает

STEP 1

Настройте кривую

Перетащите две цветные ручки на кривой. Каждая — это контрольная точка: X ограничен диапазоном 0–1, а Y может выходить за пределы — для упругой плавности.

STEP 2

Предпросмотр движения

Нажмите «Играть», чтобы анимировать блок по треку с вашей кривой в качестве CSS transition-timing-function — так вы почувствуете плавность, а не просто увидите линию.

STEP 3

Скопируйте значение

Скопируйте значение cubic-bezier(x1, y1, x2, y2) или полную строку transition одним кликом и вставьте в свою таблицу стилей. Ничего не загружается.