Editor de bezier cúbico

Recursos de Editor de bezier cúbico

• 01

  Arraste a curva, veja o movimento

  Duas alças arrastáveis controlam o início e o fim do bezier. A animação de bola acompanhante reproduz a curva na duração de sua escolha, para que você possa visualizar o efeito overshoot e ease-out sem deixar a página.

• 02

  Todas as predefinições padrão

  Comece com os valores ease, linear, ease-in, ease-out e ease-in-out integrados do CSS — depois ajuste. O comutador de predefinição volta para "personalizado" automaticamente quando você move uma alça.

• 03

  Cópia de CSS com um clique

  O valor cubic-bezier() se atualiza ao vivo com precisão de duas casas decimais, pronto para ser solto em transition-timing-function ou animation-timing-function.

Perguntas frequentes sobre Editor de bezier cúbico

Por que os valores Y podem ir acima de 1 ou abaixo de 0?

Os pontos de controle de Bezier fora do intervalo 0–1 produzem efeitos de overshoot e undershoot — a curva vai além do ponto final antes de se acomodar. É assim que as curvas de suavização "bouncy" são feitas; o eixo X ainda precisa estar em 0–1.

Como faço para usar a saída?

Copie a string cubic-bezier(...) e cole-a em qualquer valor CSS transition-timing-function ou animation-timing-function. Funciona em todos os navegadores modernos.

A visualização é precisa para o que o CSS fará?

Sim — a visualização anima uma bola de 0 a 100% usando a mesma fórmula cubic bezier que os navegadores usam para transições. O controle deslizante de duração permite que você sinta curvas lentas vs rápidas antes de se comprometer.

O que ease-in-out realmente significa?

Ease-in-out começa lentamente, acelera no meio e desacelera novamente no final — a curva cubic-bezier(0.42, 0, 0.58, 1). É o padrão para a maioria do movimento de interface suave porque reflete como objetos físicos reais aceleram e desaceleram.