Skip to content

Цвет и дизайн

Редактор Cubic Bezier

Бесплатный редактор cubic-bezier. Визуально создавайте кривые сглаживания CSS с помощью ползунков, предустановок и предварительного просмотра анимации в реальном времени. Копируйте CSS для переходов и анимаций.

Runs in your browser

Cubic-bezier editor

CSS

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

Примечание редактора

Understanding · Time, but with feeling.

Эта углублённая глава пока доступна только на английском языке. Инструмент конвертации выше работает на вашем языке; развёрнутая статья ещё не переведена.

Часто задаваемые вопросы

Quick answers.

›What's a cubic-bezier?

A curve defined by 4 control values — used by CSS transitions and animations to control the rate of change over time. The browser's 'ease' is cubic-bezier(0.25, 0.1, 0.25, 1).

›What's overshoot?

When the easing curve exceeds 0 or 1 (control y-values < 0 or > 1), the animation 'bounces' past its endpoints. Useful for playful UIs.

›Are presets available?

Yes — common presets (linear, ease, ease-in, ease-out, ease-in-out) plus a few popular custom curves.

›Is the editor free?

Yes — fully free, no signup.

Люди также ищут

Связанные инструменты

More in this room.

Смотреть все в Цвет и дизайн