1001Ferramentas
〰️ Dev

Gerador Cubic Bezier

Crie e visualize curvas cubic-bezier para animações CSS. Arraste os pontos de controle, veja o preview da animação e copie o valor pronto. Inclui presets (ease, ease-in, ease-out). Tudo no navegador.

0 1 0 1

O que é?

cubic-bezier(x1, y1, x2, y2) define uma curva de aceleração para transitions e animations CSS. Os dois pontos de controle (P1 e P2) ajustam o ritmo da animação: valores baixos no Y inicial fazem o movimento começar lento; valores altos fazem começar rápido.

Os valores de Y podem ultrapassar [0, 1] para criar efeitos de overshoot (animação que ultrapassa o destino e volta) — útil para botões e elementos com personalidade. Tudo no navegador.

Ferramentas Relacionadas