Какая функция плавности используется в CSS по умолчанию?

По умолчанию transition и animation используют ease, что равно cubic-bezier(0.25, 0.1, 0.25, 1): быстрый старт и плавное завершение.

Как сделать выход за границу или отскок?

Перетащите маркер выше 1 или ниже 0. easeOutBack, cubic-bezier(0.34, 1.56, 0.64, 1), проскакивает конечную точку и возвращается назад. Одна кубическая кривая Безье не может отскочить несколько раз; для этого используйте ключевые кадры или функцию linear().

Можно ли использовать то же значение для анимаций?

Да. Значение работает в transition-timing-function, animation-timing-function и в параметре easing Web Animations API.

Генератор кривых Безье

Настраивайте кривые плавности CSS, перетаскивая два маркера. Сравнивайте движение с линейной анимацией и копируйте cubic-bezier() для transition или Tailwind.

Редактор кривой

Перетащите любой маркер. Пунктирная линия — линейная анимация.

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

Ваша кривая

Линейная

Положение на каждой десятой доле длительности

transition: transform 1000ms ease;
/* or */
animation-timing-function: ease;

Все данные остаются в вашем браузере.

Справочники по форматам

MDN — cubic-bezier()
W3C — CSS Easing Functions Level 1

Страница инструмента обновлена: 2026-10-25

Редактор кривой

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

Инструкция и пример

Похожие инструменты

Справочники по форматам