Editor de Cubic Bezier

Editor de Cubic Bezier - Gerador Visual de Curvas Easing CSS

Desenhe curvas de easing personalizadas para CSS com um editor visual interativo. Arraste dois pontos de controle para moldar qualquer função cubic-bezier(), veja a animação ao vivo e compare com palavras-chave padrão como ease-in-out. Copie o código CSS pronto para colar em transições e animações.

O que é uma função cubic-bezier() no CSS?

Uma função cubic-bezier() descreve como uma transição ou animação CSS progride ao longo do tempo. Em vez de andar a velocidade constante, a animação pode acelerar, desacelerar, ultrapassar a meta ou quicar de acordo com uma curva definida por quatro números.

Sintaxe: cubic-bezier(x1, y1, x2, y2)

A curva sempre começa em (0, 0) e termina em (1, 1). Os pontos de controle P1 = (x1, y1) e P2 = (x2, y2) deformam a curva. O eixo X representa o tempo (0 a 1) e o eixo Y representa o progresso da animação.

Se a curva sobe rapidamente no início, a animação começa rápida. Se sobe devagar e acelera depois, sente-se um ease-in. Quando os valores Y saem do intervalo [0, 1], a animação ultrapassa o destino — é assim que surgem os efeitos back/bounce.

Como usar este editor de cubic-bezier?

Três formas de criar a curva:

1. Arraste os dois controles azuis no canvas para remodelar a curva visualmente. Eles correspondem a P1 e P2 em cubic-bezier(x1, y1, x2, y2).
2. Digite valores exatos nos campos X1/Y1/X2/Y2 se precisar de precisão.
3. Clique em qualquer predefinição (ease, ease-in-out, ease-out-back, etc.) para carregar uma curva conhecida e modificá-la.

Depois clique em Reproduzir para ver uma bolinha animada com o seu easing. Use o menu Comparar para rodar uma segunda bolinha com uma palavra-chave CSS padrão e perceber a diferença. O código CSS aparece embaixo — clique em Copiar para colar na sua folha de estilo.

Para acessibilidade, os controles recebem foco com Tab e movem-se com as setas (Shift para passos maiores).

Diferença entre ease, ease-in, ease-out e ease-in-out?

São as quatro palavras-chave de easing padrão do CSS e cada uma equivale a um cubic-bezier() específico:

- ease: cubic-bezier(0.25, 0.1, 0.25, 1) — início rápido, fim lento. Valor padrão quando não se especifica timing function.
- ease-in: cubic-bezier(0.42, 0, 1, 1) — início lento, acelera no fim. Útil quando um elemento sai da tela.
- ease-out: cubic-bezier(0, 0, 0.58, 1) — início rápido, desacelera no fim. Ideal para elementos que entram na tela.
- ease-in-out: cubic-bezier(0.42, 0, 0.58, 1) — lento nos dois extremos, rápido no meio. Simétrico e natural.

Obs.: 'linear' equivale a cubic-bezier(0, 0, 1, 1) — velocidade constante sem easing. Para a maioria das animações de UI, ease-out é a escolha mais polida pois transmite inércia física.

O que são curvas overshoot e anticipation?

Curvas overshoot empurram a animação além do valor final antes de se acomodar, criando um efeito de quique ou 'back' divertido. Anticipation faz o oposto: recua um pouco antes de avançar, imitando como um objeto real toma impulso.

Em cubic-bezier(), isso é feito com valores Y fora do intervalo [0, 1]:

- Overshoot (ease-out-back): cubic-bezier(0.34, 1.56, 0.64, 1) — o Y do segundo ponto passa de 1, a curva ultrapassa 100% antes de estabilizar.
- Anticipation (ease-in-back): cubic-bezier(0.36, 0, 0.66, -0.56) — o Y do segundo ponto é negativo, o valor cai abaixo de 0 momentaneamente.
- Forte em ambos os lados: cubic-bezier(0.68, -0.6, 0.32, 1.6).

Este editor permite Y entre -2 e 2 para você experimentar livremente. Esses easings funcionam ótimo em modais, marcas de sucesso e animações que precisam de personalidade.

Onde uso o valor cubic-bezier() gerado?

Cole em qualquer propriedade timing-function do CSS. Os dois casos mais comuns:

1. transition-timing-function em uma transição:
.button {
transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

2. animation-timing-function em @keyframes:
.card {
animation: fadeIn 600ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

O valor também funciona em bibliotecas de animação:
- Framer Motion: transition={{ ease: [0.34, 1.56, 0.64, 1] }}
- GSAP: gsap.to(el, { x: 100, ease: 'cubicBezier(0.34, 1.56, 0.64, 1)' })
- Web Animations API: el.animate(frames, { easing: 'cubic-bezier(0.34, 1.56, 0.64, 1)' })

Alguns sistemas como Material Design 3 publicam tokens cubic-bezier recomendados — digite-os em X1/Y1/X2/Y2 para visualizar.

Como importo ou espelho um valor cubic-bezier() existente?

Cole qualquer valor no campo Importar no topo do cartão Código CSS e clique em Importar (ou pressione Enter). O editor interpreta o valor, carrega os dois pontos de controle no canvas e roda a pré-visualização para você visualizar e refinar uma curva que já tem.

Formatos aceitos:

- Um valor completo: cubic-bezier(0.34, 1.56, 0.64, 1)
- Uma lista simples: 0.34, 1.56, 0.64, 1
- Uma palavra-chave CSS: linear, ease, ease-in, ease-out ou ease-in-out

É o inverso do botão Copiar, transformando a ferramenta em um editor de ida e volta para auditar valores de easing de tokens de design (Material Design 3), exportação do Figma, configuração do Framer Motion ou a folha de estilo de um colega. Os valores X são limitados a 0–1 e os Y a -2–2; o que não puder ser interpretado mostra um aviso de erro.

Para espelhar uma curva (transformar ease-in em ease-out ou vice-versa), troque e inverta os pontos: a curva cubic-bezier(x1, y1, x2, y2) inverte para cubic-bezier(1-x2, 1-y2, 1-x1, 1-y1). Por exemplo, ease-in cubic-bezier(0.42, 0, 1, 1) espelha para ease-out cubic-bezier(0, 0, 0.58, 1). Importe a original, leia os valores e depois importe o conjunto espelhado para comparar as duas direções.

Qual easing é mais performático e acessível?

A função cubic-bezier() em si não tem custo de desempenho mensurável — o que importa é a propriedade que você anima. Anime apenas transform e opacity, que o navegador pode compor na GPU. Animar propriedades de layout (width, top, margin) força reflows a cada quadro, independentemente do easing.

Dicas de desempenho para qualquer timing function:

- Use will-change: transform com moderação para avisar o compositor e remova-o quando a animação terminar, para não desperdiçar memória.
- Curvas overshoot (ease-out-back, ease-in-out-back) repintam uma área um pouco maior; mantenha-as em transform/opacity.
- Easings suaves como ease-out-quad cubic-bezier(0.5, 1, 0.89, 1) ou ease-out-cubic cubic-bezier(0.33, 1, 0.68, 1) ficam polidos e continuam baratos.

Por acessibilidade, sempre respeite prefers-reduced-motion: envolva a animação não essencial em @media (prefers-reduced-motion: no-preference) { ... }, ou desative-a em @media (prefers-reduced-motion: reduce). A curva escolhida aqui não é afetada por reduced-motion — é a sua media query que honra a preferência do usuário. Evite overshoot ou quiques fortes (ease-in-back cubic-bezier(0.36, 0, 0.66, -0.56), ease-in-quad cubic-bezier(0.11, 0, 0.5, 0)) para quem pede movimento reduzido, pois movimento forte pode causar desconforto vestibular.

Por que os valores X são limitados a 0–1?

As coordenadas X (x1 e x2) precisam ficar entre 0 e 1, e este editor força isso automaticamente. Motivo matemático: o eixo X representa o tempo, que deve avançar monotonicamente. Se um ponto de controle saísse de [0, 1] ou voltasse atrás, a curva poderia se dobrar sobre si mesma, criando dois progressos diferentes para o mesmo instante — comportamento não definido no CSS.

Os valores Y, em compensação, podem sair livremente de [0, 1]. Y representa o progresso, que pode ultrapassar o destino (Y > 1) ou recuar momentaneamente (Y < 0). É isso que possibilita os efeitos back/bounce.

Se você digitar um X fora do intervalo, o editor corta para 0 ou 1 automaticamente.

Qual a diferença para CSS spring() ou linear()?

cubic-bezier() é a função de easing original do CSS, suportada em todos os navegadores desde 2008. Usa dois pontos de controle para descrever uma curva.

Alternativas mais novas:

- Função linear() (CSS Easing Functions Level 2): descreve um easing como uma lista de pontos. Útil para curvas arbitrárias ou medidas — por exemplo, molas com vários quiques que um bezier não consegue representar. Suporte em Chromium moderno, Safari 17.4+ e Firefox 112+.

- @starting-style e view transitions continuam usando funções de easing padrão como cubic-bezier().

- Spring physics (Framer Motion, React Spring) é outro modelo — simula um sistema massa-mola em vez de avaliar uma curva fixa.

Para CSS em produção hoje, cubic-bezier() permanece o mais compatível e previsível. Use linear() quando precisar de um quique real (vários picos) que um bezier sozinho não consegue criar.

Esta ferramenta é privada? Envia minhas curvas para algum lugar?

Totalmente privada. Tudo acontece no seu navegador:

- Nenhum dado é enviado a servidores
- Sem contas, sem cadastros e sem rastreamento da sua edição
- Funciona offline depois que a página carrega
- Não carrega bibliotecas externas para o editor — é JavaScript puro
- O código CSS gerado só sai do seu dispositivo quando você decide copiar

Dá para verificar abrindo a aba Rede do navegador enquanto edita a curva: nenhuma requisição aparece. Apenas o carregamento inicial e os recursos comuns do site (fontes, ícones).

Principais Recursos

• Editor de curva interativo com arrastar e soltar
• Dois pontos de controle arrastáveis com atualização em tempo real
• Bolinha de animação que reproduz o seu easing
• Comparação lado a lado com palavras-chave CSS padrão
• Duração de animação ajustável de 0,2s a 4s
• 12 predefinições de easing nomeadas (ease, ease-in-out, ease-out-back e mais)
• Campos numéricos para coordenadas X/Y precisas
• Suporta overshoot e anticipation (Y de -2 a 2)
• Campo de importação para colar e visualizar um valor cubic-bezier() existente ou palavra-chave
• Gera código CSS cubic-bezier() pronto para copiar
• Exporta transition-timing-function e animation-timing-function
• Pontos de controle acessíveis pelo teclado com setas
• Compatível com Framer Motion, GSAP e Web Animations API
• 100% no cliente, sem envio de dados a servidores
• Funciona offline após o primeiro carregamento
• Modo escuro e layout responsivo amigável ao celular