Gerador de Curva Cubic-Bezier CSS

Como usar

1. Arraste os handles azul e vermelho para moldar a curva.
2. Ou escolha um preset (ease, ease-in-out, overshoot…).
3. Play para sentir o movimento na duração, copie o CSS.

Perguntas frequentes

Por que Y > 1 ou < 0?

Overshoot ('bounce') e antecipação ('wind-up') precisam Y fora de [0, 1]. CSS permite — o valor animado pode passar brevemente do target antes de assentar.

E os X?

CSS restringe X1 e X2 a [0, 1] para que a curva seja função do tempo. O slider limita para X mas permite Y > 1 / < 0 para overshoot.

Diferença para springs?

Cubic-bezier é curva determinística sobre tempo fixo. Springs (`linear(...)` ou JS) modelam física real — modelo diferente, sensação parecida em casos simples.

Onde uso em CSS?

`transition-timing-function: cubic-bezier(...)` para transições, ou `animation-timing-function:` para keyframes. Tailwind: `ease-[cubic-bezier(...)]`.

Ferramentas relacionadas