Как этим пользоваться?

Тяните две точки, P1 и P2, или начните с заготовки. Кнопка «Проиграть» покажет движение, а «Выполнить» добавит кривую в список.

Что такое cubic-bezier?

Кривая, которая задаёт, как анимация ускоряется и замедляется. Её можно вставить прямо в timing-function у transition или animation.

Нажмите кнопку копирования у поля CSS или у любой сохранённой кривой — правило timing-function попадёт в буфер обмена.

Редактор CSS-easing

Настройте кривую скорости анимации на глаз и скопируйте CSS с cubic-bezier.

Предпросмотр

P1 X

P1 Y

P2 X

P2 Y

CSS

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

Форму можно задать и вручную, перетаскивая точки P1 и P2.

Создайте кривую, нажмите «Выполнить» — она соберётся здесь.