Генератор Cubic Bezier

Создавайте CSS-функции cubic-bezier с интерактивным редактором кривых, превью анимации и пресетами easing.

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

Пресеты

Контрольные точки

Превью анимации

Translate

Scale

Opacity

Вывод CSS

transition-timing-function: cubic-bezier(0.25, 0.10, 0.25, 1.00);
animation-timing-function: cubic-bezier(0.25, 0.10, 0.25, 1.00);

Ctrl+Enter выполнитьCtrl+Shift+C скопировать

Узнать больше

Генератор кубических кривых Безье: визуальный easing CSS-анимаций

Кубические кривые Безье управляют ощущением CSS-анимаций. Узнайте, как контрольные точки формируют движение.

Что такое кубические кривые Безье?

Кубическая кривая Безье — это математическая функция, используемая в CSS для определения тайминга анимаций и переходов. Записанная как cubic-bezier(x1, y1, x2, y2), она описывает, как анимация продвигается от начала до конца, отображая время на прогресс вдоль плавной кривой, определённой четырьмя контрольными точками.

5 мин чтенияЧитать полное руководство