Редактор cubic-bezier

Создавайте свою CSS-плавность, перетаскивая две контрольные точки кривой cubic-bezier, смотрите живое превью анимации и копируйте готовое значение cubic-bezier().

Как пользоваться

1. Тяните синюю и красную ручки, чтобы задать форму кривой
2. Смотрите, как точка-превью анимируется с вашей плавностью
3. Или начните с пресета: ease, ease-in, ease-out, ease-in-out, linear
4. Кликните по значению, чтобы скопировать строку cubic-bezier()

Частые вопросы

Что такое плавность cubic-bezier?

CSS-функция времени, заданная двумя контрольными точками — она определяет, как анимация разгоняется и тормозит во времени.

Может ли кривая выходить за пределы?

Да — Y контрольной точки может быть ниже 0 или выше 1 для эффектов отскока/overshoot; X остаётся в 0–1, как требует CSS.

Где использовать значение?

В transition-timing-function или animation-timing-function, например transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1).