Editor de cubic bezier

Arraste os dois pontos de controle da curva para moldar um easing personalizado, ou comece por um preset como ease-in-out e ajuste a partir dele. Os quatro campos numéricos ficam sincronizados com as alças, então dá para ajustar os valores na mão ou visualmente. Uma animação de prévia toca seu easing lado a lado com uma referência linear, o que deixa fácil ver o quanto a curva acelera ou desacelera o movimento em comparação com um ritmo constante.

Como funciona o editor de curva?

Um easing cubic-bezier() do CSS é definido por dois pontos de controle, (x1, y1) e (x2, y2), com o início e o fim da curva fixos em (0,0) e (1,1). As coordenadas x representam o tempo e ficam sempre limitadas ao intervalo de 0 a 1 exigido pelo CSS, mas as coordenadas y, que representam o progresso, podem passar desse intervalo neste editor (aproximadamente de -1 a 2), para você desenhar um efeito de overshoot, em que o movimento passa do alvo e depois se acomoda, como nos presets embutidos ease-in-back e ease-out-back. Por trás dos panos, a ferramenta calcula a curva do mesmo jeito que um navegador faz: para um instante dado, ela resolve o ponto correspondente na curva com algumas rodadas do método de Newton, recorrendo à bisseção simples quando a curva é achatada demais para o método de Newton convergir rápido.

Também dá para colar um valor cubic-bezier(...) direto nos campos numéricos, e a ferramenta reconstrói as alças arrastáveis a partir dele, desde que os valores de x fiquem dentro do intervalo válido de 0 a 1.

O que eu desenho é enviado para algum servidor?

Não. O editor de curva, a matemática por trás dele e a animação de prévia rodam inteiramente no navegador. Nada do que você desenha é enviado a lugar nenhum, e não existe chamada a servidor em nenhum momento.

Use para ajustar transições e animações CSS: um ease-out ágil para o clique de um botão, um overshoot saltitante para a entrada de um modal, ou uma curva personalizada que combine com a especificação de movimento de uma ferramenta de design. Copie o valor cubic-bezier() pronto direto para sua folha de estilos. Veja a referência de easing-function do MDN para entender como ele se encaixa em transition-timing-function e animation-timing-function, ou a referência da função cubic-bezier() para a sintaxe exata.